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ù)。
問題:select標(biāo)簽中可以輸入內(nèi)容嗎?(解決:另一篇文章可選擇和輸入的下拉列表框 )
3. 如何獲得輸入框中的內(nèi)容?(解決,在輸入框上添加onkeyup時(shí)間觸發(fā)的函數(shù)用js獲得)
4. 如何匹配?(解決)
4.1 如何獲得所有option中的內(nèi)容?(解決)
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)鍵是通過option對象的innerText屬性獲取到選項(xiàng)文本
}
return allText;
}
4.2 js分割字符串?(解決)
var allText = getSelectText();
//alert(allText);
// 每個(gè)option的內(nèi)容分割開來
var eachOptin = new Array();
eachOptin=allText.split(","); //字符分割
4.3 如何在js中匹配?
//如果option內(nèi)容中有輸入的內(nèi)容就返回第一次匹配的位置(大于等于0),如果沒有匹配的就返回-1
var flag = eachOptin[i].indexOf(shuru) ;
5. 如何讓匹配的內(nèi)容顯示在option的前面的選項(xiàng)?(通過改變option的index編號)( 解決)
方法:當(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,注意測試,和重新修改一下,應(yīng)該是上面第五條中的邏輯問題
代碼如下:
<!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輸入框的內(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)容分割開來
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),如果沒有匹配的就返回-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重新賦值,賦值為符合條件的第一個(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編號
//alert(obj[i].value);//獲得option的value的值
allText+= obj[i].innerText+','; //關(guān)鍵是通過option對象的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;">--請選擇--</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>
注意代碼中的注釋
上面代碼的運(yùn)行結(jié)果如下:
2. 如何獲取每次輸入的內(nèi)容,當(dāng)keyup的時(shí)候觸發(fā)函數(shù)。
問題: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)鍵是通過option對象的innerText屬性獲取到選項(xiàng)文本
}
return allText;
}
4.2 js分割字符串?(解決)
復(fù)制代碼 代碼如下:
var allText = getSelectText();
//alert(allText);
// 每個(gè)option的內(nèi)容分割開來
var eachOptin = new Array();
eachOptin=allText.split(","); //字符分割
4.3 如何在js中匹配?
復(fù)制代碼 代碼如下:
//如果option內(nèi)容中有輸入的內(nèi)容就返回第一次匹配的位置(大于等于0),如果沒有匹配的就返回-1
var flag = eachOptin[i].indexOf(shuru) ;
5. 如何讓匹配的內(nèi)容顯示在option的前面的選項(xiàng)?(通過改變option的index編號)( 解決)
方法:當(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,注意測試,和重新修改一下,應(yīng)該是上面第五條中的邏輯問題
代碼如下:
復(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>測試</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)容分割開來
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),如果沒有匹配的就返回-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重新賦值,賦值為符合條件的第一個(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編號
//alert(obj[i].value);//獲得option的value的值
allText+= obj[i].innerText+','; //關(guān)鍵是通過option對象的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;">--請選擇--</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>
注意代碼中的注釋
上面代碼的運(yùn)行結(jié)果如下:

您可能感興趣的文章:
- angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動態(tài)下拉框示例
- jquery及原生js獲取select下拉框選中的值示例
- Vue.js 2.0中select級聯(lián)下拉框?qū)嵗?/a>
- javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- JS實(shí)現(xiàn)下拉框的動態(tài)添加(附效果)
- Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹效果(自寫)
- 省市區(qū)三級聯(lián)動下拉框菜單javascript版
- javascript下拉框選項(xiàng)單擊事件的例子分享
- js實(shí)現(xiàn)select下拉框選擇
- js實(shí)現(xiàn)帶搜索功能的下拉框
相關(guān)文章
BootStrap智能表單實(shí)戰(zhàn)系列(四)表單布局介紹
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(四)表單布局介紹,表單布局分為自動布局和自定義布局兩種,本文通過代碼給大家介紹,介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06JavaScript獲取時(shí)間戳的方法總結(jié)
JavaScript獲得時(shí)間戳的方法有五種,后四種都是通過實(shí)例化時(shí)間對象new Date() 來進(jìn)一步獲取當(dāng)前的時(shí)間戳,下面我們就一起學(xué)習(xí)一下具體獲取的方法吧2023-09-09javascript下數(shù)值型比較難點(diǎn)說明
下面兩個(gè)小問題是樓豬在實(shí)際項(xiàng)目開發(fā)中遇到的,貼上來和大家討論下。2010-06-06weex slider實(shí)現(xiàn)滑動底部導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了weex slider實(shí)現(xiàn)滑動底部導(dǎo)航功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JavaScript使用Promise封裝Axios進(jìn)行高效開發(fā)
這篇文章主要介紹了JavaScript使用Promise封裝Axios進(jìn)行高效開發(fā),Axios是一個(gè)基于Promise的HTTP庫,它可以幫助我們更方便地發(fā)起HTTP請求,并且提供了許多高級功能,感興趣的同學(xué)可以參考下文2023-05-05d3.js入門教程之?dāng)?shù)據(jù)綁定詳解
這篇文章主要介紹了關(guān)于d3.js數(shù)據(jù)綁定的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)只d3.js具有一定的參考價(jià)值,需要的朋友下面來一起看看吧。2017-04-04JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)groupBy函數(shù)詳解
今天在打算從js端時(shí)序數(shù)據(jù)庫TSDB中,按相同的類型的數(shù)據(jù)排在一起,并且取同一時(shí)間段最新的數(shù)據(jù),經(jīng)過查詢這種思想叫做數(shù)據(jù)聚合,就是返回的數(shù)據(jù)要根據(jù)一個(gè)屬性來做計(jì)算,這篇文章主要介紹了JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)?groupBy函數(shù),需要的朋友可以參考下2023-12-12