html下拉框添加搜索,js实现带搜索功能的下拉框实时搜索实时匹配

js实现带搜索功能的下拉框实时搜索实时匹配

这里有新鲜出炉的 Javascript 教程，程序狗速度看过来！

JavaScript 客户端脚本语言

Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

当 select 输入框中每输入一点内容的时候，在 option 中找出与内容匹配的选项显示在 option 的前面选项中，下面有个不错的示例，希望朋友们可以喜欢

1. 当 select 输入框中每输入一点内容的时候，在 option 中找出与内容匹配的选项显示在 option 的前面选项中。

2. 如何获取每次输入的内容，当 keyup 的时候触发函数。

问题：select 标签中可以输入内容吗？(解决：另一篇文章可选择和输入的下拉列表框)

3. 如何获得输入框中的内容？(解决，在输入框上添加 onkeyup 时间触发的函数用 js 获得)

4. 如何匹配？(解决)

4.1 如何获得所有 option 中的内容？(解决)functiongetSelectText()

{

//获得所有select标签

varobject=document.getElementsByTagName('select');

//因为该html中只有一个select标签，所以就是name = "aabb"代表的标签

varobj=object[0];

//alert(obj.length);

//alert(obj[0]);

//保存所有option 的值

varallText;

for(i=0;i

{

allText+=obj[i].innerText+',';//关键是通过option对象的innerText属性获取到选项文本

}

returnallText;

}

4.2 js 分割字符串？(解决)varallText=getSelectText();

//alert(allText);

// 每个option的内容分割开来

vareachOptin=newArray();

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

4.3 如何在 js 中匹配？//如果option内容中有输入的内容就返回第一次匹配的位置(大于等于0)，如果没有匹配的就返回-1

varflag=eachOptin[i].indexOf(shuru);

5. 如何让匹配的内容显示在 option 的前面的选项？(通过改变 option 的 index 编号)( 解决)

方法：当查到匹配的选项的时候，将第一个 option 重新新增到 select 最后，然后，将第一个的值重置为匹配的 option 的值，然后删掉原始匹配的 option

7. js 实现 select 标签右边三角的功能(未解决，当搜索之后，直接显示所有 option 选项可供选择)

8. 在匹配的 option 选项有多个的时候出现 bedug, 注意测试，和重新修改一下，应该是上面第五条中的逻辑问题

代码如下：

测试

functiononku(){

//获得input输入框的内容

varshuru=document.getElementById('ccdd').value;

varobject=document.getElementsByTagName('select');

varobj=object[0];

//如果输入的内容为空，所有的选项都匹配

if(shuru!=''){

//alert(shuru);

//获得option中的所有内容

varallText=getSelectText();

//alert(allText);

// 每个option的内容分割开来

vareachOptin=newArray();

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

varf=1;

for(i=1;i

//alert(eachOptin[i]);

//如果option内容中有输入的内容就返回第一次匹配的位置(大于等于0)，如果没有匹配的就返回-1

varflag=eachOptin[i].indexOf(shuru);

if(flag>=0){

//alert(i);

//将index为f的option重新新增一遍，显示在最后

obj.options.add(newOption(obj[i].innerText,obj[f].value));

//将编号为f的option重新赋值，赋值为符合条件的第一个option

obj.options[f]=newOption(eachOptin[i],eachOptin[i]);

//删除最初存在的符合条件的option

obj.remove(i);

f++;

}

}

}

}

functiongetSelectText(){

//获得所有select标签

varobject=document.getElementsByTagName('select');

//因为该html中只有一个select标签，所以就是name = "aabb"代表的标签

varobj=object[0];

//alert(obj.length);

//alert(obj[0]);

//保存所有option 的值

varallText;

for(i=0;i

//alert(obj[i].index);//获得option的index编号

//alert(obj[i].value);//获得option的value的值

allText+=obj[i].innerText+',';//关键是通过option对象的innerText属性获取到选项文本

}

returnallText;

}

onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">

--请选择--

北京

上海

广州

上123

苏州

οnkeyup="onku()">