html 下拉框模糊查询,简单实用js—可输入可选择可模糊查询的select下拉

JS代码

$(document).bind('click', function(e) {

var e = e || window.event; //浏览器兼容性

var elem = e.target || e.srcElement;

while(elem) { //循环判断至跟节点，防止点击的是div子元素

if(elem.id && (elem.id == 'title' || elem.id == "result")) {

return;

}

elem = elem.parentNode;

}

$('#result').css('display', 'none'); //点击的不是div或其子元素

});

function changeF(this_) {

$("#title").val($(this_).find("option:selected").text());

$("#result").css({

"display": "none"

});

}

function setfocus(this_) {

$("#result").css({

"display": ""

});

}

function setinput(this_) {

$.post("repair_order_statistics!getTitleInfo.action", {

title: $("#title").val()

},

function(data) {

var select = $("#result");

select.html("");

var jsonObj = eval("(" + data + ")");

for(i = 0; i < jsonObj.data.length; i++) {

var option = $("").text(jsonObj.data[i]);

select.append(option);

}

});

}

页面代码

标题:

上面是工作时我运用的代码，接下来是网上大神发的domo

JS代码

var TempArr=[];//存储option

$(function(){

/*先将数据存入数组*/

$("#typenum option").each(function(index, el) {

TempArr[index] = $(this).text();

});

$(document).bind('click', function(e) {

var e = e || window.event; //浏览器兼容性

var elem = e.target || e.srcElement;

while (elem) { //循环判断至跟节点，防止点击的是div子元素

if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {

return;

}

elem = elem.parentNode;

}

$('#typenum').css('display', 'none'); //点击的不是div或其子元素

});

})

function changeF(this_) {

$(this_).prev("input").val($(this_).find("option:selected").text());

$("#typenum").css({"display":"none"});

}

function setfocus(this_){

$("#typenum").css({"display":""});

var select = $("#typenum");

for(i=0;i

var option = $("").text(TempArr[i]);

select.append(option);

}

}

function setinput(this_){

var select = $("#typenum");

select.html("");

for(i=0;i

//若找到以txt的内容开头的，添option

if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){

var option = $("").text(TempArr[i]);

select.append(option);

}

}

}

页面代码

1

2

12323

31

1332

412

42

11

CSS代码

.second select {

width: 11%;

height: 106px;

margin: 0px;

outline: none;

border: 1px solid #999;

margin-top: 31px;

}

.second input {

width: 167px;

top: 9px;

outline: none;

border: 0pt;

position: absolute;

line-height: 30px;

left: 8px;

height: 30px;

border: 1px solid #999;

}

.second ul {

position: absolute;

top: 27px;

border: 1px solid #999;

left: 8px;

width: 125px;

line-height: 16px;

}

.ul li{

list-style: none;

width: 161px;

/* left: 15px; */

margin-left: -40px;

font-family: 微软雅黑;

padding-left: 4px;

}

.blue {

background:#1e91ff;

}