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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:17 PM

下拉框搜索功能

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{ 
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,注意测试，和重新修改一下，应该是上面第五条中的逻辑问题
代码如下：

复制代码代码如下:

测试
<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>

注意代码中的注释
上面代码的运行结果如下：
js实现带搜索功能的下拉框实时搜索实时匹配_javascript技巧

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。