Problemas con la busqueda de datos dentro de un list box

angel_mundarain · #1 (**permalink**) 13/07/2009, 12:52

tengo un problema con una caja de texto y un listbox, yo requiero que al colocar un nombre en la caja de texto inmediatamente se me actualice el listbox con los nombres cercanos
por favor alguien me puede ayudar es en html

Adler · #2 (**permalink**) 13/07/2009, 13:59

Hola, bienvenido al foro

Podrías usar tanto javascript como ajax. En ambos casos este tema se a tratado ya en varias ocasiones. Usa el buscador

Suerte

djaevi · #3 (**permalink**) 13/07/2009, 19:54

Bueno justo estoy trabajando en algo asi con ajax pero te dejo un ejemplo bastante sencillo en javascript a ver si te sirve...

Aca va el codigo javascript primero:

Código PHP:

  var paises = new Array('Argentina','Argelia','Arabia','Andorra','Armenia','Afganistan','Alemania'); 
 
// voy a usar 2 funciones una que arma una lista del tipo select en base a: 
// nombre de formulario, nombre de select, y un array que llena las opciones 
// esta funcion simplemente con estos datos llena la lista que yo le indico 
// con las opciones del array y algo muy importante que hace tambien 
// es igualar la propiedad length de la lista a la del array para no duplicar valores 
 
function armarLista(elFormulario,elSelect,elArray) { 
    var obtenerSelect = eval('document.'+elFormulario+'.'+elSelect); 
    obtenerSelect.length = elArray.length; 
        for (var i=0;i<elArray.length;i++) { 
                var opcion = new Option(elArray[i],elArray[i]); 
                obtenerSelect[i] = opcion; 
        } 
} 
 
// esta es la funcion que va a comparar los datos ingresados por el usuario 
// con las opciones de un array que le paso como parametro en este caso 
// el mismo con el que armo mi lista 
 
function reArmarArray(arrayInicial) { 
    var arrayNuevo = new Array(); 
    var texto = document.getElementById('busqueda').value; 
 
// lo que hago en el bucle es preguntar si el texto capturado del campo de texto 
// es igual a un fragmento de la opcion del array, este fragmento coincide 
// con el largo del texto ingresado ejemplo 
// el usuario ingreso hola va a cortar todas las opciones del array a las 4 
// primeras letras para ir viendo si coinciden 
// por ultimo puse un toLowerCase no distingue mayusculas y minusculas 
// y si son iguales armo un nuevo array con las opciones que van coincidiendo 
 
        for (var i=0; i<arrayInicial.length; i++) { 
            if (texto.toLowerCase() == arrayInicial[i].substring(0,texto.length).toLowerCase()) { 
                arrayNuevo.push(arrayInicial[i]); 
            } 
        } 
 
// por ultimo vuelvo a llamar la funcion armar lista y le paso como parametro el nuevo array 
 
    armarLista('buscador','lista',arrayNuevo); 
} 
 
</script>

y aca el codigo html

Código HTML:

<body onload="armarLista('buscador','lista',paises)">
<form name="buscador">
<input type="text" id="busqueda" value="caja1" onkeyup="reArmarArray(paises)";>
<select name="lista" id="lista" multiple="multiple">
</select>
</form>
</body>

Ojala te sirva salu2