脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → select下拉框模糊查询

Select下拉框模糊查询功能实现代码

 更新时间：2016年07月22日 09:49:28   作者：morley_wang  
这篇文章主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

select下拉列表框支持输入模糊查询功能，设计非常的人性化，下面小编给大家分享了关键代码，大家根据自己的需求适当的添加修改，有任何问题欢迎给我反馈。

关键代码如下所示：

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

以上所述是小编给大家介绍的Select下拉框模糊查询功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • jquery中click等事件绑定及移除的几种方法小结

    jquery中click等事件绑定及移除的几种方法小结

    这篇文章主要介绍了jquery中绑定事件与解绑事件是常用到的写法，这里总结了几种常见的绑定事件与解绑事件的方法,需要的朋友可以参考下
    2023-05-05
  • JS设计模式之状态模式的用法使用方法

    JS设计模式之状态模式的用法使用方法

    JavaScript状态模式是一种行为型设计模式,核心是对象在其内部状态改变时改变其行为,状态模式将对象的行为封装到不同的状态类中,使得对象在不同状态下可以选择不同的行为,本文给大家详细的介绍一下状态设计模式在Js中的使用,需要的朋友可以参考下
    2023-08-08
  • 谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    这篇文章给大家介绍了谷歌showModalDialog()方法不兼容出现对话窗口的解决办法，解决办法非常好，感兴趣的朋友可以参考下
    2016-02-02
  • JavaScript实现Promise流程详解

    JavaScript实现Promise流程详解

    首先呢，Promise是异步中比较重要的知识点，学习的最好方法就是掌握它的基本原理。所以这一篇主要说一下如何用JS来实现一个自己的promise
    2022-09-09
  • JavaScript 拖拽实例代码

    JavaScript 拖拽实例代码

    这篇文章主要介绍了JavaScript 拖拽实例代码的相关资料,需要的朋友可以参考下
    2016-09-09
  • 利用uni-app生成微信小程序的踩坑记录

    利用uni-app生成微信小程序的踩坑记录

    uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台,这篇文章主要给大家介绍了关于利用uni-app生成微信小程序的踩坑记录,需要的朋友可以参考下
    2022-04-04
  • 深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP

    深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP

    本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第3篇，里氏替换原则LSP（The Liskov Substitution Principle ）。
    2012-01-01
  • 关闭浏览器窗口弹出提示框并且可以控制其失效

    关闭浏览器窗口弹出提示框并且可以控制其失效

    这篇文章主要介绍了关闭浏览器窗口时弹出提示框，并且可以通过函数控制其失效,需要的朋友可以参考下
    2014-04-04
  • 微信小程序如何再次获取用户授权的方法

    微信小程序如何再次获取用户授权的方法

    这篇文章主要介绍了微信小程序如何再次获取用户授权的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • javascript封装 Cookie 应用接口

    javascript封装 Cookie 应用接口

    本文通过几个简单的示例向大家展示了javascript封装cookie的注意事项及操作方法，非常的简单实用，最后附上一则具体实例，有需要的小火把可以参考下。
    2015-08-08

最新评论