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


Posted in Javascript onJuly 22, 2016

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下拉框模糊查询功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js模拟滚动条(横向竖向)
Feb 22 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
原生JS实现分页
Apr 19 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 #Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 #Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 #Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 #Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 #Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 #Javascript
高效Web开发的10个jQuery代码片段
Jul 22 #Javascript
You might like
也谈php网站在线人数统计
2008/04/09 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
input 高级限制级用法
2009/03/26 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python集合能干吗
2020/07/19 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
详解python polyscope库的安装和例程
2020/11/13 Python
Java程序员面试题
2013/07/15 面试题
社区优秀志愿者材料
2014/02/02 职场文书
小学老师寄语大全
2014/04/04 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
七年级作文之英语老师
2019/10/28 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
MYSQL常用函数介绍
2022/05/05 MySQL