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下拉框模糊查询功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍MyBatis实现动态查询、模糊查询功能，包括了MyBatis实现动态查询、模糊查询功能的使用技巧和注意事项，需要的朋友参考一下 要实现查询，咱们就先有个数据库，截图如下，其中cityAreaId是外键，本次可以忽略； 下面Branches是我的实体类，里面有name和address属性； 接口中方法： MyBatis的接口映射文件的代码： 动态查询： 模糊查询： 然后就是main方
-
本文向大家介绍Angularjs实现带查找筛选功能的select下拉框示例代码，包括了Angularjs实现带查找筛选功能的select下拉框示例代码的使用技巧和注意事项，需要的朋友参考一下 前言 对于select的下拉列表，像国家选择这样的功能，全世界那么多国家，一直拉滚动条多辛苦，眼睛也要盯着找，累！所以为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件，但
-
本文向大家介绍jQuery模拟select实现下拉菜单功能，包括了jQuery模拟select实现下拉菜单功能的使用技巧和注意事项，需要的朋友参考一下 用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。 JS代码： demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果) 截个图： 代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多
-
本文向大家介绍angularjs 实现带查找筛选功能的select下拉框实例，包括了angularjs 实现带查找筛选功能的select下拉框实例的使用技巧和注意事项，需要的朋友参考一下 一.背景 对于select的下拉列表，像国家选择这样的功能，全世界那么多国家，一直拉滚动条多辛苦，眼睛也要盯着找，累！so，为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件，
-
本文向大家介绍mybatis分页及模糊查询功能实现，包括了mybatis分页及模糊查询功能实现的使用技巧和注意事项，需要的朋友参考一下 mybatis中分页有3种方式来实现，通过sql语句（两种传参方式）来实现，通过mybatis 的 Rowbounds 来实现。 通过（自定义类型）传参 来实现分页： 映射文件： 测试代码： 通过map传参实现： 映射文件： 测试代码： 通过RowBounds来实
-
本文向大家介绍Bootstrap select多选下拉框实现代码，包括了Bootstrap select多选下拉框实现代码的使用技巧和注意事项，需要的朋友参考一下 前言 项目中要实现多选，就想到用插件，选择了bootstrap-select。 附上官网api链接，http://silviomoreto.github.io/bootstrap-select/. 没有中文的。对付看吧。有机会每个方法实