select下拉列表框支持输入模糊查询功能，设计非常的人性化，下面小编给大家分享了关键代码，大家根据自己的需求适当的添加修改，有任何问题欢迎给我反馈。

关键代码如下所示：

可输入的下拉框

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

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.οnmοuseοver=function (){

this.style.backgroundColor='#003399';

this.style.color ='#ffffff';

}

selText.οnmοuseοut=function (){

this.style.backgroundColor='#ffffff';

this.style.color ='#000000';

}

selText.οnclick=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

{

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

{

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

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';

}

Section

ALL 0TEST1 = Testing 1 0TEST2 = Testing 1 0TEST3 = Testing 1 SECTION = Section Description XXXXX AAA

以上所述是小编给大家介绍的Select下拉框模糊查询功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

时间： 2016-07-20