js實現帶搜索功能的下拉框實時搜索實時匹配

2024-05-06 15:54:07

字體：大中小

來源：轉載

供稿：網友

當select輸入框中每輸入一點內容的時候，在option中找出與內容匹配的選項顯示在option的前面選項中，下面有個不錯的示例，希望朋友們可以喜歡

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

復制代碼代碼如下:

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<obj.length;i++)
{
allText += obj[i].innerText+','; //關鍵是通過option對象的innerText屬性獲取到選項文本
}
return allText;
}

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

復制代碼代碼如下:

var allText = getSelectText();
//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,注意測試，和重新修改一下，應該是上面第五條中的邏輯問題
代碼如下：

復制代碼代碼如下:

<!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>測試</title>
<script>
function onku()
{
//獲得input輸入框的內容
var shuru = document.getElementById('ccdd').value;
var object = document.getElementsByTagName('select');
var obj = object[0];
//如果輸入的內容為空，所有的選項都匹配
if(shuru!= '')
{
//alert(shuru);
//獲得option中的所有內容
var allText = getSelectText();
//alert(allText);
// 每個option的內容分割開來
var eachOptin = new Array();
eachOptin=allText.split(","); //字符分割
var f = 1;
for (i=1;i<eachOptin.length-1 ;i++ )
{
//alert(eachOptin[i]);
//如果option內容中有輸入的內容就返回第一次匹配的位置（大于等于0），如果沒有匹配的就返回-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));
//將編號為f的option重新賦值，賦值為符合條件的第一個option
obj.options[f]=new Option(eachOptin[i],eachOptin[i]);
//刪除最初存在的符合條件的option
obj.remove(i);
f++;
}
}
}
}
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<obj.length;i++)
{
//alert(obj[i].index);//獲得option的index編號
//alert(obj[i].value);//獲得option的value的值
allText+= obj[i].innerText+','; //關鍵是通過option對象的innerText屬性獲取到選項文本
}
return allText;
}
</script>
</head>

<body>
<span>
<select
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
<option value="">--請選擇--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
<option value="上123">上123</option>
<option value="蘇州">蘇州</option>
</select>
</span>
<span>
<input type="text" value="可選擇也可輸入的下拉框" onkeyup="onku()">
</span>
</body>
</html>