Texto Predictivo en un Select.

eduardoHashil · #1 (**permalink**) 27/02/2012, 09:48

Hola a todos los expertos:

Antes que nada les envío un saludo y les comento que he estado buscando un script para poder hacer las veces de texto predictivo en un input text. Es decir, una vez que se carga una consulta a la BD en un select, al ir tecleando los caracteres, el script tiene que ir seleccionando las opciones más cercanas a la búsqueda.

Ya probé este script

Código:

<script language="JavaScript1.2">
var digitos=10 //cantidad de digitos buscados
var puntero=0
var buffer=new Array(digitos) //declaración del array Buffer
var cadena=""

function buscar_op(obj,objfoco){
   var letra = String.fromCharCode(event.keyCode)
   if(puntero >= digitos){
       cadena="";
       puntero=0;
    }
   //si se presiona la tecla ENTER, borro el array de teclas presionadas y salto a otro objeto...
   if (event.keyCode == 13){
       borrar_buffer();
       if(objfoco!=0) objfoco.focus(); //evita foco a otro objeto si objfoco=0
    }
   //sino busco la cadena tipeada dentro del combo...
   else{
       buffer[puntero]=letra;
       //guardo en la posicion puntero la letra tipeada
       cadena=cadena+buffer[puntero]; //armo una cadena con los datos que van ingresando al array
       puntero++;

       //barro todas las opciones que contiene el combo y las comparo la cadena...
       for (var opcombo=0;opcombo < obj.length;opcombo++){
          if(obj[opcombo].text.substr(0,puntero).toLowerCase()==cadena.toLowerCase()){
          obj.selectedIndex=opcombo;
          }
       }
    }
   event.returnValue = false; //invalida la acción de pulsado de tecla para evitar busqueda del primer caracter
}

function borrar_buffer(){
   //inicializa la cadena buscada
    cadena="";
    puntero=0;
}
</script>

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="544" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="89" height="29"></td>
<td width="114"></td>
<td width="26"></td>
<td width="315"></td>
</tr>
<tr>
<td height="19"></td>
<td valign="top">
<select name="combo1" onKeypress=buscar_op(this,text2) onblur=borrar_buffer() onclick=borrar_buffer()>
    <option>Argentina</option>
    <option>Australia</option>
    <option>Bolivia</option>
    <option>Brasil</option>
    <option>Canada</option>
    <option>Colombia</option>
    <option>Dinamarca</option>
    <option>Estados Unidos</option>
    <option>Estonia</option>
    <option>Austria</option>
    <option>Bulgaria</option>
    <option>Chile</option>
    <option>España</option>
    <option>China</option>
    <option>Costa Rica</option>
    <option>Croacia</option>
    <option>Ecuador</option>
</select>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td height="18"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="28"></td>
<td colspan="2" valign="top">
<input type="text" name="text2">
</td>
<td></td>
</tr>
<tr>
<td height="58"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Pero algo debo estar haciendo mal porque no hace la búsqueda predictiva.

De antemano agradezco sus comentarios, opiniones, regaños, sugerencias y lo que ustedes puedan aportar

Un gran saludo
Eduardo.

maycolalvarez · #2 (**permalink**) 27/02/2012, 12:09

el <select> en HTML no permite edición de texto, necesita implementar eso con algún plugin autocomplete

eduardoHashil · #3 (**permalink**) 27/02/2012, 15:52

Al parecer sí existe. Prueba con el siguiente código y creo que es algo aproximado a la solución

Saludos
Eduardo

Código:

function matchFieldSelect (field, select, value) {
	var property = value ? 'value' : 'text';
	var found = false;
	for (var i = 0; i < select.options.length; i++){
		if ((found = select.options[i][property].indexOf(field.value) ==0))
			break;
		if (found)
			select.selectedIndex = i;
		else
			select.selectedIndex = -1;
		if (field.createTextRange) {
			var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;"
			if (cursorKeys.indexOf(event.keyCode+";") == -1) {
				var r1 = field.createTextRange()
				var oldValue = r1.text;
				var newValue = found ? select.options[i][property] : oldValue;
					if (newValue != field.value) {
						field.value = newValue
						var rNew = field.createTextRange()
						rNew.moveStart('character', oldValue.length)
						rNew.select()
					}
			}
		}
	}
}


 <input type="text" name="a" value="" id="buscarNombre" size="25" maxlength="200" onkeyup="matchFieldSelect(this, this.form.b)" />

<select name="b" size="1">
<option value="1">aa</option>
<option value="2">aab</option>
<option value="3">bb</option>
<option value="4">bbc</option>
</select>

Espero que a alguien le sirva

Un gran saludo y un agradecimiento

E.