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 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
正则表达式语法
2006/10/09 Javascript
PHP网站备份程序代码分享
2011/06/10 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python列表与元组的异同详解
2019/07/02 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python configparser模块常用方法解析
2020/05/22 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
店长助理岗位职责
2013/12/13 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
趣味体育活动方案
2014/02/08 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
教研处工作方案
2014/05/26 职场文书
党员个人对照检查材料
2014/10/01 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
html中两种获取标签内的值的方法
2022/06/16 jQuery
使用CSS实现音波加载效果
2023/05/07 HTML / CSS