En fin, visitando varios sitios listados en este foro, googleando, fui encontrando ejemplos y armando una serie de scripts para terminar esto:
Un formulario tipo "búsqueda de coincidencias", que consiste de un input de texto y un select. Cuando una persona ingresa parte de una palabra en el input, debería completarse el select con coincidencias de ese texto.
Este script me anda bien en Internet Explorer, pero falla en Mozilla Firefox (y no he tenido oportunidad de probarlo en otro explorador). El depurador de FF no dice exactamente donde está el error, de hecho no devuelve un error de js.
Les pido ayuda a los genios de Javascript que hay por aquí: ¿dónde estará el problema? ¿Qué habré de hacer?
He aquí mis scripts:
Primero, el html:
Código:
Segundo, el .js: Buscar: <input type="text" id="nombre" maxlength="8" value="" size="20" onKeyUp="checkName(nombre)"/>
<div id="result"></div>
<select id="listaNombres" name="lname" size="4">
<option></option>
</select>
Noten que quiero que como mínimo se envien 3 caracteres, por eso el uso de la variable "largo".
Código:
Por último, éste es el script que procesa la búsqueda y devuelve los elementos del select:var request = false;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
function checkName(field) {
var largo = 0;
largo = field.value.length;
if (largo > 2) {
if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
request = false;
}
}
}
if (request) {
request.onreadystatechange = processReqChange;
request.open("POST", "busqueda_nombres.php");
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
request.send("name="+encodeURIComponent(field.value));
}
}
}
function processReqChange() {
var result = document.getElementById("result");
var lista = document.getElementById("listaNombres");
var respuesta = '';
var opciones = new Array();
var valores = new Array();
if (request.readyState == 4) {
if (request.status == 200) {
respuesta = request.responseText;
opciones = respuesta.split(';'); //separo grupos de nombres/ids por punto y coma
lista.options.length = 0;
for (var i = 0; i < opciones.length; i++) { //actualizamos el select con cada elemento obtenido
valores = opciones[i].split(','); //separo nombre e id por coma
anOption = document.createElement("option");
lista.options.add(anOption, 0);
anOption.innerText = valores[0]; //The text for the option
anOption.Value = valores[1]; //The option's value
}
lista.options.selectedIndex = 0;
result.innerHTML = "<b>Selecciona la persona. Si no lo encuentras, prueba otra búsqueda.</b>";
}
} else {
result.innerHTML = "Procesando ...";
}
}
Código PHP:
<?php
require('connect.php');
function enviarNombres($text) {
header("Content-type: text/html; charset=utf-8");
echo utf8_encode($text);
}
// Se duerme 1 segundo para que la respuesta no sea inmediata
// y se vean los cambios si se prueba en local
sleep(1);
$name = addslashes(utf8_decode($_POST['name']));
if (! is_string($name))
exit;
//controlemos que $name sea una cadena de no menos de 3 caracteres y tampoco más de 8
if ((strlen($name)<3) || (strlen($name)>8))
exit;
//busquemos coincidencia de nombres de usuario
$sql = "... aqui tengo mi consulta a la BBDD"
$result = @mysql_query($sql);
$quienes = array();
while ($filas = mysql_fetch_assoc($result))
$quienes[] = $filas['memberName'] .','. $filas['ID_MEMBER'];
$cuales = implode(';',$quienes);
enviarNombres($cuales);
?> Luego el js transforma esa cadena de nuevo en un array y crea cada nuevo OPTION en el select.
Repito que este proceso anda bien en IE, por lo que no tiene un problema lógico de base, sino que hay un problema de compatibilidad en FF.
Es decir que el problema debe estar en el archivo .js, ¿verdad?
¿Alguien puede ayudarme?
Muchas gracias de antemano.
