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