js實現帶有搜尋功能的下拉框即時搜尋即時匹配_javascript技巧

1. 當select輸入框中每輸入一點內容的時候，在option中找出與內容相符的選項顯示在option的前面選項中。
2. 如何取得每次輸入的內容，當keyup的時候觸發函數。
問題：select標籤中可以輸入內容嗎？ (解決：另一篇文章可選擇和輸入的下拉列錶框 )
3. 如何取得輸入框中的內容？ (解決，在輸入框上加入onkeyup時間觸發的函數用js獲得)
4. 如何匹配？ （解決）
4.1 如何取得所有option中的內容？ (解)

複製程式碼 程式碼如下:

function getSelectText()


function getSelectText()
{ 🎜>//取得所有select標籤
var object = document.getElementsByTagName('select');
//因為該html中只有一個select標籤，所以就是name = "aabb"代表的標籤
var obj = object[0];
//alert(obj.length);
//alert(obj[0]);
//保存所有option 的值
var allText;
for(i=0;i{
allText = obj[i].innerText ','; //關鍵在於透過option物件的innerText屬性取得選項文字
}
return allText;

}

4.2 js分割字串？ （解決） 複製程式碼

程式碼如下:


var allText = SelectgetText()
>//alert(allText);
// 每個option的內容分割開來
var eachOptin = new Array();

eachOptin=allText.split(","); //字元分割

4.3 如何在js中配對？ 複製程式碼

程式碼如下:


//如果option內容中有輸入的內容就回傳第一次匹配的位置（大於等於0），如果沒有匹配的就回傳-1

var flag = eachOptin[i].indexOf(shuru) ;


5. 如何讓匹配的內容顯示在option的前面的選項？ （透過改變option的index編號）（ 解決）
方法：當查到匹配的選項的時候，將第一個option重新新增到select最後，然後，將第一個的值重設為匹配的option的值，然後刪掉原始匹配的option
7. js 實現select標籤右邊三角的功能（未解決，當搜尋之後，直接顯示所有option選項可供選擇）
8.在匹配的option選項有多個的時候出現bedug,注意測試，和重新修改一下，應該是上面第五條中的邏輯問題

程式碼如下： 複製程式碼

程式碼如下:

<script> <BR>function onku() <BR>{ <BR>//取得input輸入框的內容<BR> var shuru = document.getElementById('ccdd').value; <BR>var object = document.getElementsByTagName('select'); <BR>var obj = object[0]; <BR>//如果輸入的內容為空，所有的選項都符合<BR>if(shuru!= '') <BR>{ <BR>//alert(shuru); <BR>//取得option中的所有內容<BR>var allText = getSelectText (); <BR>//alert(allText); <BR>// 每個option的內容分割開來<BR>var eachOptin = new Array(); <BR>eachOptin=allText.split(",") ; //字元分割<BR>var f = 1; <BR>for (i=1;i<eachOptin.length-1 ;i ) <BR>{ <BR>//alert(eachOptin[i]); <BR>//如果option內容中有輸入的內容就回傳第一次符合的位置（大於等於0），如果沒有符合的就回傳-1 <BR>var flag = eachOptin[i].indexOf(shuru) ; <BR>if(flag >=0) <BR>{ <BR>//alert(i); <BR>//將index為f的option重新新增一遍，顯示在最後<BR>obj.options. add(new Option(obj[i].innerText,obj[f].value)); <BR>//將編號為f的option重新賦值，賦值為符合條件的第一個option <BR>obj.options [f]=new Option(eachOptin[i],eachOptin[i]); <BR>//刪除原本存在的符合條件的option <BR>obj.remove(i); <BR>f ; <BR>} <BR>} <BR>} <BR>} <BR>function getSelectText() <BR>{ <BR>//取得所有select標籤<BR>var object = document.getElementsByTagName('select'); //因為該html中只有一個select標籤，所以就是name = "aabb"代表的標籤<BR>var obj = object[0]; <BR>//alert(obj.length); <BR>//alert (obj[0]); <BR>//保存所有option 的值<BR>var allText; <BR>for(i=0;i<obj.length;i ) <BR>{ <BR>//alert (obj[i].index);//取得option的index編號<BR>//alert(obj[i].value);//取得option的value的值<BR>allText = obj[i].innerText ','; //關鍵是透過option物件的innerText屬性取得到選項文字<BR>} <BR>return allText; <BR>} <BR></script>



onChange="javascript:document.getElementById('ccdd').value= document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
--請選擇--
北京
上海
廣州
上123
蘇州

span>






注意程式碼中的註解
上面程式碼的運作結果如下：