快捷導(dǎo)航

js實(shí)現(xiàn)帶搜索功能的下拉框?qū)崟r(shí)搜索實(shí)時(shí)匹配

更新時(shí)間：2013年11月05日 17:43:06 作者：

當(dāng)select輸入框中每輸入一點(diǎn)內(nèi)容的時(shí)候，在option中找出與內(nèi)容匹配的選項(xiàng)顯示在option的前面選項(xiàng)中，下面有個(gè)不錯(cuò)的示例，希望朋友們可以喜歡

1. 當(dāng)select輸入框中每輸入一點(diǎn)內(nèi)容的時(shí)候，在option中找出與內(nèi)容匹配的選項(xiàng)顯示在option的前面選項(xiàng)中。
2. 如何獲取每次輸入的內(nèi)容，當(dāng)keyup的時(shí)候觸發(fā)函數(shù)。
問(wèn)題：select標(biāo)簽中可以輸入內(nèi)容嗎？(解決：另一篇文章可選擇和輸入的下拉列表框 )
3. 如何獲得輸入框中的內(nèi)容？(解決，在輸入框上添加onkeyup時(shí)間觸發(fā)的函數(shù)用js獲得)
4. 如何匹配？（解決）
4.1 如何獲得所有option中的內(nèi)容？(解決)

復(fù)制代碼代碼如下:

 
function getSelectText() 
{ 
//獲得所有select標(biāo)簽 
var object = document.getElementsByTagName('select'); 
//因?yàn)樵揾tml中只有一個(gè)select標(biāo)簽，所以就是name = "aabb"代表的標(biāo)簽 
var obj = object[0]; 
//alert(obj.length); 
//alert(obj[0]); 
//保存所有option 的值 
var allText; 
for(i=0;i<obj.length;i++) 
{ 
allText += obj[i].innerText+','; //關(guān)鍵是通過(guò)option對(duì)象的innerText屬性獲取到選項(xiàng)文本 
} 
return allText; 
} 

4.2 js分割字符串？（解決）

復(fù)制代碼代碼如下:

 
var allText = getSelectText(); 
//alert(allText); 
// 每個(gè)option的內(nèi)容分割開(kāi)來(lái) 
var eachOptin = new Array(); 
eachOptin=allText.split(","); //字符分割 

4.3 如何在js中匹配？

復(fù)制代碼代碼如下:

 
//如果option內(nèi)容中有輸入的內(nèi)容就返回第一次匹配的位置（大于等于0），如果沒(méi)有匹配的就返回-1 
var flag = eachOptin[i].indexOf(shuru) ; 

5. 如何讓匹配的內(nèi)容顯示在option的前面的選項(xiàng)？（通過(guò)改變option的index編號(hào)）（解決）
方法：當(dāng)查到匹配的選項(xiàng)的時(shí)候，將第一個(gè)option重新新增到select最后，然后，將第一個(gè)的值重置為匹配的option的值，然后刪掉原始匹配的option
7. js 實(shí)現(xiàn)select標(biāo)簽右邊三角的功能（未解決，當(dāng)搜索之后，直接顯示所有option選項(xiàng)可供選擇）
8.在匹配的option選項(xiàng)有多個(gè)的時(shí)候出現(xiàn)bedug,注意測(cè)試，和重新修改一下，應(yīng)該是上面第五條中的邏輯問(wèn)題
代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>測(cè)試</title> 
<script> 
function onku() 
{ 
//獲得input輸入框的內(nèi)容 
var shuru = document.getElementById('ccdd').value; 
var object = document.getElementsByTagName('select'); 
var obj = object[0]; 
//如果輸入的內(nèi)容為空，所有的選項(xiàng)都匹配 
if(shuru!= '') 
{ 
//alert(shuru); 
//獲得option中的所有內(nèi)容 
var allText = getSelectText(); 
//alert(allText); 
// 每個(gè)option的內(nèi)容分割開(kāi)來(lái) 
var eachOptin = new Array(); 
eachOptin=allText.split(","); //字符分割 
var f = 1; 
for (i=1;i<eachOptin.length-1 ;i++ ) 
{ 
//alert(eachOptin[i]); 
//如果option內(nèi)容中有輸入的內(nèi)容就返回第一次匹配的位置（大于等于0），如果沒(méi)有匹配的就返回-1 
var flag = eachOptin[i].indexOf(shuru) ; 
if(flag >=0) 
{ 
//alert(i); 
//將index為f的option重新新增一遍，顯示在最后 
obj.options.add(new Option(obj[i].innerText,obj[f].value)); 
//將編號(hào)為f的option重新賦值，賦值為符合條件的第一個(gè)option 
obj.options[f]=new Option(eachOptin[i],eachOptin[i]); 
//刪除最初存在的符合條件的option 
obj.remove(i); 
f++; 
} 
} 
} 
} 
function getSelectText() 
{ 
//獲得所有select標(biāo)簽 
var object = document.getElementsByTagName('select'); 
//因?yàn)樵揾tml中只有一個(gè)select標(biāo)簽，所以就是name = "aabb"代表的標(biāo)簽 
var obj = object[0]; 
//alert(obj.length); 
//alert(obj[0]); 
//保存所有option 的值 
var allText; 
for(i=0;i<obj.length;i++) 
{ 
//alert(obj[i].index);//獲得option的index編號(hào) 
//alert(obj[i].value);//獲得option的value的值 
allText+= obj[i].innerText+','; //關(guān)鍵是通過(guò)option對(duì)象的innerText屬性獲取到選項(xiàng)文本 
} 
return allText; 
} 
</script> 
</head> 

<body> 
<span style=" position:absolute;border:1pt solid #c1c1c1; overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);"> 
<select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;" 
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;"> 
<option value="" style="color:#c2c2c2;">--請(qǐng)選擇--</option> 
<option value="北京">北京</option> 
<option value="上海">上海</option> 
<option value="廣州">廣州</option> 
<option value="上123">上123</option> 
<option value="蘇州">蘇州</option> 
</select> 
</span> 
<span style="position:absolute; border:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;"> 
<input type="text" name="ccdd" id="ccdd" value="可選擇也可輸入的下拉框" style="width:170px;height:15px;border:0pt;" onkeyup="onku()"> 
</span> 
</body> 
</html> 