JS中Select下拉列表类(支持输入模糊查询)功能
2017-01-17 09:58
826 查看
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示:
<span style="font-size:14px;"> <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY > <Script Language="Javascript"> var j = 0; function SelectValue(obj) { var input = obj.parentNode.nextSibling; document.all.box2.value = obj.options[obj.selectedIndex].text; document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value; alert(document.getElementById("txtSection").value); } function InputValue(obj) { var n = 1; var tmpObj; var src = document.all.SelectOption; var msg = document.all.msg; if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){ if(obj.value!=""){ msg.style.display=""; msg.innerHTML=""; if(msg.hasChildNodes()) { msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]); } for (var i=0;i<src.length;i++){ var selValue = document.createElement("div"); var selText = document.createElement("div"); selText.value = src(i).value; selText.innerHTML = src(i).text; if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ selText.setAttribute("id","selText"+n); selText.onmouseover=function (){ this.style.backgroundColor='#003399'; this.style.color ='#ffffff'; } selText.onmouseout=function (){ this.style.backgroundColor='#ffffff'; this.style.color ='#000000'; } selText.onclick=function (){ document.all.box2.value = this.innerHTML; msg.style.display="none"; document.getElementById("txtSection").value=this.value; } msg.appendChild(selText); n++; } } } else { document.all.msg.style.display="none"; } } else { //press down key if(event.keyCode==40){ j++; for (var i=0; i<src.length; i++) { tmpObj = document.getElementById("selText"+i); if(tmpObj != null){ tmpObj.style.backgroundColor='#ffffff'; tmpObj.style.color ='#000000'; } } tmpObj = document.getElementById("selText"+j); if(tmpObj != null){ tmpObj.style.backgroundColor='#003399'; tmpObj.style.color ='#ffffff'; }else{ j = 0; } } //press up key if (event.keyCode==38){ j--; for (var i=0; i<src.length; i++) { tmpObj = document.getElementById("selText"+i); if(tmpObj != null){ tmpObj.style.backgroundColor='#ffffff'; tmpObj.style.color ='#000000'; } } tmpObj = document.getElementById("selText"+j); if(tmpObj != null){ tmpObj.style.backgroundColor='#003399'; tmpObj.style.color ='#ffffff'; }else{ j = 2; } } //press enter key if (event.keyCode==13){ tmpObj = document.getElementById("selText"+j); document.all.box2.value = tmpObj.innerHTML; msg.style.display="none"; document.getElementById("txtSection").value=tmpObj.value; } } } function SelMatch(src) { var currSel = document.all.box2.value; for (var i=0;i<src.length;i++){ if (src(i).text==currSel) { src.options(i).selected = true; } } } function NoMsg() { if(document.activeElement.id=="msg") return false; else document.all.msg.style.display='none'; } </Script> <TABLE border=0 cellPadding=1 cellSpacing=0 width="100%"> <TR> <TD width="24%"><font face="Arial" size="2">Section</font></TD> <TD COLSPAN=3 width="76%"> <div style="position:relative;"> <span style="margin-left:230px;width:18px;overflow:hidden;"> <select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" > <OPTION value='ALL' Selected>ALL</OPTION> <OPTION value='0TEST1'>0TEST1 = Testing 1 <OPTION value='0TEST1'>0TEST2 = Testing 1 <OPTION value='0TEST1'>0TEST3 = Testing 1 <OPTION value='SECTION'>SECTION = Section Description XXXXX AAA </OPTION> </select></span> <input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="0" > <div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden; width:230px;position:absolute;left:0px;top:20px;display:none"></div> </div> <Input Type="Hidden" Name="txtSection" id="txtSection"> </TD> </TR> </TABLE> <p> </BODY> </HTML> </span>
以上所述是小编给大家介绍的JS中Select下拉列表类(支持输入模糊查询)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- 基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
- 用JavaScript来美化HTML的select标签的下拉列表效果
- 使用js实现一个可编辑的select下拉列表
- Select标签下拉列表二级联动级联实例代码
- javascript对下拉列表框(select)的操作实例讲解
- js Select下拉列表框进行多选、移除、交换内容的具体实现方法
- Jquery多选下拉列表插件jquery multiselect功能介绍及使用
- 利用jquery操作select下拉列表框的代码
- php 获取select下拉列表框的值
- 点击按钮后 文本框变为Select下拉列表框
- javascript 获取select下拉列表值的代码
相关文章推荐
- Select下拉列表类(支持输入模糊查询)
- 简单实用js——可输入可选择可模糊查询的select下拉
- Select下拉框(支持输入模糊查询)
- AngularJS+Bootstrap 分页功能实现,同时支持模糊查询分页
- Select下拉框模糊查询功能实现代码
- 基于bootstrap-select插件,实现select下拉框模糊查询功能
- 【JavaScript】Select下拉列表 可输入的模糊查询
- 【项目实战】select+input实现下拉框左右选择+模糊查询功能
- JS为Select下拉框添加输入功能
- Select下拉框模糊查询功能实现代码
- js实现Select下拉框具有输入功能的方法
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Select下拉列表类(支持输入模糊查询)
- [导入]Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中(ZT)
- select数据较多时支持按输入信息模糊过滤选项集合
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中