自動完成在JavaScript

選擇選項，我試圖讓汽車完全根據用戶的輸入自動完成在JavaScript

像

<input type=text onkeyup=findit()> 

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

我發現這個代碼「來選擇選項，但只能在一個工作選擇頁面（我需要多選）

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

任何想法如何使它在頁面上的多選擇工作？

感謝

Baaroz

來源

2012-05-31 baaroz

不知道這是否會爲你工作，但chosen.js有一個非常好的autocomple多選擇

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

來源

2012-05-31 10:22:45 MiGnH

偉大的解決方案謝謝 – baaroz

謝謝你差異很大！這真的很有幫助！ – Maria

通常是自動完成的單值，但jQuery UI autocomplete確實有多種選擇功能。也許試試？最小的努力爲你編碼。

來源

2012-05-31 10:19:32

一種奇怪的方式做到這一點是改變ID在腳本和複製您希望在頁面中使用此選項的次數。例如：

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

然後。複製腳本並將每個（sel）替換爲sel1，然後用sel2替換（sel）等等。不是最好的解決方案，但它會工作。好運

來源

2013-03-16 14:36:49 Kareem

自動完成在JavaScript

回答

相關問題