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实现无刷新DropDownList联动实现代码
Mar 08 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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上的memcache和memcached两个pecl库
2010/03/29 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
JavaScript Split()方法
2015/12/18 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python模块之StringIO使用示例
2015/04/08 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python ftplib模块使用代码实例
2019/12/31 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
党校培训自我鉴定
2014/02/01 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
冬季安全检查方案
2014/05/23 职场文书
火锅店的活动方案
2014/08/15 职场文书
超市员工辞职信范文
2015/05/12 职场文书