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 相关文章推荐
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
详解Node 定时器
Feb 26 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue中监听返回键问题
Aug 28 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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缓存类实例
2014/07/18 PHP
php防止用户重复提交表单
2015/11/02 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python不同系统中打开方法
2020/06/23 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
关于保护环境的建议书
2014/05/13 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年团支部工作总结
2014/11/17 职场文书
干部考察材料范文
2014/12/24 职场文书
手术室护士个人总结
2015/02/13 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js