2012-05-31 18 views
5

में विकल्प का चयन करने मैंस्वत: पूर्ण जावास्क्रिप्ट

की तरह कुछ
<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

उत्तर

9

सुनिश्चित नहीं हैं कि अगर यह आपके लिए काम करेंगे, लेकिन chosen.js वास्तव में एक अच्छा autocomple बहु

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

+0

ग्रेट सॉल्यूशन धन्यवाद – baaroz

+0

धन्यवाद आप बहुत भिन्न हैं! यह वास्तव में सहायक था! – Maria

0

आमतौर पर स्वत: पूर्ण एकल मूल्यों के लिए है, लेकिन jQuery UI autocomplete एक बहु का चयन समारोह होता है। शायद कोशिश करो? इस तरह से आपके लिए कोडिंग न्यूनतम प्रयास।

0

एक अजीब तरीका है कि ऐसा करने के लिए चयन किया गया है लिपि में आईडी को बदलने और इसे कॉपी करने के लिए है पृष्ठ में इस विकल्प का उपयोग करने के लिए आप कितनी बार उपयोग करना चाहते हैं। तो उदाहरण के लिए:

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

और फिर। स्क्रिप्ट की प्रतिलिपि बनाएँ और प्रत्येक (एसईएल) को sel1 के साथ दोबारा प्रतिस्थापित करें और sel2 के साथ (sel) को प्रतिस्थापित करें और इसी तरह। सबसे अच्छा समाधान नहीं है लेकिन यह काम करेगा। गुड लक

संबंधित मुद्दे