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

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> <BR>function onku() <BR>{ <BR>//获得input输入框的内容 <BR>var shuru = document.getElementById('ccdd').value; <BR>var object = document.getElementsByTagName('select'); <BR>var obj = object[0]; <BR>//如果输入的内容为空，所有的选项都匹配 <BR>if(shuru!= '') <BR>{ <BR>//alert(shuru); <BR>//获得option中的所有内容 <BR>var allText = getSelectText(); <BR>//alert(allText); <BR>// 每个option的内容分割开来 <BR>var eachOptin = new Array(); <BR>eachOptin=allText.split(","); //字符分割 <BR>var f = 1; <BR>for (i=1;i<eachOptin.length-1 ;i++ ) <BR>{ <BR>//alert(eachOptin[i]); <BR>//如果option内容中有输入的内容就返回第一次匹配的位置（大于等于0），如果没有匹配的就返回-1 <BR>var flag = eachOptin[i].indexOf(shuru) ; <BR>if(flag >=0) <BR>{ <BR>//alert(i); <BR>//将index为f的option重新新增一遍，显示在最后 <BR>obj.options.add(new Option(obj[i].innerText,obj[f].value)); <BR>//将编号为f的option重新赋值，赋值为符合条件的第一个option <BR>obj.options[f]=new Option(eachOptin[i],eachOptin[i]); <BR>//删除最初存在的符合条件的option <BR>obj.remove(i); <BR>f++; <BR>} <BR>} <BR>} <BR>} <BR>function getSelectText() <BR>{ <BR>//获得所有select标签 <BR>var object = document.getElementsByTagName('select'); <BR>//因为该html中只有一个select标签，所以就是name = "aabb"代表的标签 <BR>var obj = object[0]; <BR>//alert(obj.length); <BR>//alert(obj[0]); <BR>//保存所有option 的值 <BR>var allText; <BR>for(i=0;i<obj.length;i++) <BR>{ <BR>//alert(obj[i].index);//获得option的index编号 <BR>//alert(obj[i].value);//获得option的value的值 <BR>allText+= obj[i].innerText+','; //关键是通过option对象的innerText属性获取到选项文本 <BR>} <BR>return allText; <BR>} <BR></script>




onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
--请选择--
北京
上海
广州
上123
苏州

注意代码中的注释
上面代码的运行结果如下：