autocompletar para seleccionar la opción de Javascript

que estoy tratando de hacer auto completo para seleccionar la opción de acuerdo con la entrada del usuarioautocompletar para seleccionar la opción de Javascript

algo así como

<input type=text onkeyup=findit()> 

<select id="sel"> 
     <option value="s0001">Adams</option> 
     <option value="s0002">Alder</option> 
     . 
     . 
     . 
<select>

me encontré con este código ', pero sólo funcionan en una seleccionar en la página (Necesito selección múltiple)

<html> 
<head> 

<script type="text/javascript"> 


//initialize some global variables 
var list = null; 
function fillit(sel,fld) { 


     var field = document.getElementById("entry"); 
     var selobj = document.getElementById("sel"); 
     if(!list) 
     { 
       var len = selobj.options.length; 
       field.value = ""; 
       list = new Array(); 
       for(var i = 0;i < len;i++) 
       { 
         list[i] = new Object(); 
         list[i]["text"] = selobj.options[i].text; 
         list[i]["value"] = selobj.options[i].value; 
       } 
     } 
     else 
     { 
      var op = document.createElement("option"); 
      var tmp = null; 
      for(var i = 0;i < list.length;i++) 
      { 
       tmp = op.cloneNode(true); 
       tmp.appendChild(document.createTextNode(list[i]["text"])); 
       tmp.setAttribute("value",list[i]["value"]); 
       selobj.appendChild(tmp)/*;*/ 
      } 
     } 
} 


function findIt(sel,field) 
{ 
     var selobj = document.getElementById("sel"); 
     var d = document.getElementById("display"); 
     var len = list.length; 
     if(field.value.length > 1) 
     { 
       if(!list) 
       { 
         fillit(sel,field); 
       } 
       var op = document.createElement("option"); 
       selobj.options.length = 1 
       var reg = new RegExp(field.value,"i"); 
       var tmp = null; 
       var count = 0; 
       var msg = ""; 
       for(var i = 0;i < len;i++) 
       { 
         if(reg.test(list[i].text)) 
         { 
           // d.childNodes[0].nodeValue = msg; 
           tmp = op.cloneNode(true); 
           tmp.setAttribute("value",list[i].value); 
           tmp.appendChild(document.createTextNode(list[i].text)); 
           selobj.appendChild(tmp); 
         } 
       } 
     } 
     else if(list && len > selobj.options.length) 
     { 
       selobj.selectedIndex = 0; 
       fillit(sel,field); 
     } 
} 




</script> 


</head> 
<body onLoad="fillit(sel,entry)"> 
<div>Enter the first three letters of a street and select a match from the menu.</div> 
<form> 
Street 
<input type="text" name="Street" id="entry" onKeyUp="findIt(sel,this)"><br> 
    <select id="sel"> 
     <option value="s0001">Adams</option> 
     <option value="s0002">Alder</option> 
     <option value="s0003">bol</option> 
     <option value="s0004">col</option> 
     <option value="s0005">dol</option> 
     <option value="s0007">Cooper</option> 
<!--and so on and so forth--> 
    </select> 
</form> 
</body>

Any Ideas ¿Cómo hacer que funcione en la selección múltiple en la página?

Gracias

Baaroz

Fuente

2012-05-31 baaroz

No estoy seguro si esto funcionaría para usted, pero ha chosen.js un muy buen múltiples autocomple seleccione

http://harvesthq.github.com/chosen/

Fuente

2012-05-31 10:22:45 MiGnH

Gran solución gracias – baaroz

¡Muchísimas gracias! ¡Fue realmente útil! – Maria

Por lo general, es Autocompletar para valores individuales, pero el jQuery UI autocomplete tiene una función de selección múltiple. Tal vez intentar eso? Un mínimo esfuerzo de codificación para ti de esa manera.

Fuente

2012-05-31 10:19:32

una extraña manera de hacer esto es para cambiar el ID en el guión y copiarlo la cantidad de veces que desea usar esta opción en la página. por ejemplo:

select id="sel1" 
select id="sel2" 
select id="sel3"

y luego. copie la secuencia de comandos y reemplace cada (sel) con sel1 y vuelva a pasarla y reemplace (sel) con sel2 y así sucesivamente. no es la mejor solución, pero funcionará. Buena suerte

Fuente

2013-03-16 14:36:49 Kareem

autocompletar para seleccionar la opción de Javascript

Respuesta

Cuestiones relacionadas