Auto-Vervollständigen, um die Option in Javascript

ich zu machen versuchen, Auto-Vervollständigen-Option nach Eingabe vom BenutzerAuto-Vervollständigen, um die Option in Javascript

so etwas wie

<input type=text onkeyup=findit()> 

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

ich diesen Code ‚gefunden, aber es funktioniert nur auf einem wählen sie auf der Seite (ich brauche Multi wählen)

<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>

Irgendwelche Ideen, wie es auf Multi wählen auf der Seite funktioniert?

Dank

Baaroz

Quelle

2012-05-31 baaroz

Nicht sicher, ob dies für Sie funktionieren würde, aber chosen.js hat eine wirklich schöne autocomple Multi wählen

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

Quelle

2012-05-31 10:22:45 MiGnH

Tolle Lösung danke – baaroz

Vielen Dank variieren! Es war sehr hilfreich! – Maria

Normalerweise ist die automatische Vervollständigung für Einzelwerte, aber die jQuery UI autocomplete hat eine Mehrfachauswahl-Funktion. Vielleicht versuchen Sie das? Minimaler Aufwand für Sie auf diese Weise.

Quelle

2012-05-31 10:19:32

Eine seltsame Art und Weise zu tun, ist die ID in das Skript zu ändern und kopieren die Häufigkeit, mit der Sie diese Optionen auf der Seite verwenden möchten. so zum Beispiel:

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

und dann. kopiere das Skript und ersetze jedes (sel) mit sel1 hinterher und ersetze (sel) mit sel2 und so weiter. nicht die beste Lösung, aber es wird funktionieren. Viel Glück

Quelle

2013-03-16 14:36:49 Kareem

Auto-Vervollständigen, um die Option in Javascript

Antwort

Verwandte Themen