ayuda: el código me anda bien en IE pero no en FF

[OutofOrder]

Hola gente. Arribo a este foro como un novato en lo que es AJAX, si bien hace mucho que me manejo en PHP y MySQL. Pero se muy poco de javascript.

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:

        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>

Segundo, el .js:
Noten que quiero que como mínimo se envien 3 caracteres, por eso el uso de la variable "largo".

Código:

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 ...";
    }
}

Por último, éste es el script que procesa la búsqueda y devuelve los elementos del select:

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); 
 
?>   

Noten que devuelve un string con los elementos separados por punto y coma ";", y que cada elemento tiene el texto y valor de cada OPTION (separados por coma ",").
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.

[mount]

if (largo > 2) {
if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
request = false;
}
}
} else if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
}

Me parece que el error está en que, tal como tienes estructurado el script, no se crea el objeto para FF, pues queda fuera de la función checkName(); Si lo colocas en el if (window....) te debería funcionar.
Suerte

[OutofOrder]

Hola mount, muchas gracias, aprecio mucho tu ayuda. Me sirvió la observación, al menos en parte.
Me parecía raro que haya quedado ese if fuera de la función. Lo corregí como señalaste, pero sigue sin funcionar. En cualquier caso, pudo haber ayudado pero creo que el verdadero problema sigue estando en otra parte.

Ahora acabo de confirmar que el problema de FF está en esta parte del código:

Código:

    var result = document.getElementById("result");
    var lista = document.getElementById("listaNombres");
	 var respuesta = '';
	 var opciones = new Array();
	 var valores = new Array();
        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>";
        }

Estoy seguro que el problema está ahi, porque hice unas pruebas y el envío y recepción de variables funciona bien.

Doy un ejemplo de la cadena que envía el php:
'abc,23;defgh,56;ijklmn,13;opqrstu,33'
Entonces, la idea es que ese código separe primero por puntos y comas a un array:
'abc,23' 'defgh,56' etc

y luego cada elemento lo vuelve a separar: 'abc' '23'
En este caso, 'abc' sería el texto de la primer opción del SELECT, y 23 sería el valor de esa opción.

¿Alguien sabrá decirme por qué ese código no funciona en Firefox? ¿Será que usé alguna función que no soporta este navegador?
Sospecho que el problema está o en la definición de las variables, o dentro del for. Porque no está creando las opciones, pero sí circula por el for sin problemas.

[mount]

Buscando un poco por la red, parece que, como dices, puede ser un problema de sintaxis. Fíjate en este link:
http://www.mredkj.com/tutorials/tutorial005.html
Quizá si cambias:

Código:

lista.options.add(anOption, 0);

por

Código:

lista.options.add(anOption, null);

te funcione en FF.
A ver si hay suerte.

[OutofOrder]

Gracias por el dato mount. Lo probé así como dijiste pero aún sin resultados en IE.
Mirando el link que diste, veo que sin embargo el código usado ahi está ordenado de otra forma (si bien hace masomenos lo mismo, me refiero a la función appendOptionLast() de ese ejemplo).

Estoy probando a ver de qué forma hay que presentar el código en FF para que sirva.
Pero si alguien sabe la respuesta a mi problema, le pido por favor que responda.



Edit: Acabo de darme cuenta que el código sí funciona para agregar opciones. Pero sencillamente no les está asignando el valor ni el texto a cada opción. Siempre hablando del Firefox, desde luego.
Al menos sé que estoy cerca :P ¡Maldito script!

[OutofOrder]

¡Listo!
El problema en Firefox es el uso de "innerText" para cambiar el texto de una opción de un select. No lo acepta, por eso lo corregí cambiándolo por "text" (gracias al ejemplo de mount):

Código:

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
				
	var anOption = document.createElement("option"); 

	try {
		anOption.text = valores[0]; //The text for the option
		anOption.Value = valores[1]; //The option's value
		lista.add(anOption, null); // standards compliant; doesn't work in IE
	}
	catch(ex) {
		lista.options.add(anOption); // IE only
		anOption.innerText = valores[0]; //The text for the option
		anOption.Value = valores[1]; //The option's value
	}					
}

Muchas gracias mount, no lo hubiera podido hacer sin tu ayuda. :)



EDIT: No. Retiro lo dicho: el script aún no funciona bien en FF. Tampoco en IE.
El problema ahora es que no cambia el valor en los options (lo que vendría a ser la etiqueta value="..." ). Sólo agrega nuevas opciones con el texto correspondiente, pero sin el valor para esa opción.

Voy a seguir investigando

[OutofOrder]

Listo. ¡Ahora si!

El problema era una tontería... un problema de mayúsculas/minúsculas.
Esta línea estaba mal:

Código:

anOption.Value = valores[1]; //The option's value

La corregí por esta:

Código:

anOption.value = valores[1]; //The option's value

Como ven, la diferencia entre un script que funciona y uno que no... ¡es una V minúscula!
En fin, muchas gracias de nuevo mount. Después de todo, lo logré :D Anda tanto en IE como en FF