您的位置：首页 > 其它

可以输入的下拉框，可以筛选内容，可输入筛选下拉框（原创）

2016-02-12 15:00 537 查看

可以输入的下拉框，可以筛选内容，可输入筛选下拉框（原创）

因项目需要，需要在搜索的时候，在下拉框里需要手动输入，还要根据输入的自动在列表里筛选，代码贴上来了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>

<style type="text/css">
.newinput{ width:150px;padding: 2px 0px 2px 0px; margin-bottom: -1px; background: url(114755leueqeys1ps8dtzy.jpg.thumb.jpg) no-repeat scroll right center; border: 1px solid #ccc; box-shadow: 0 1px 0 0 #eee inset; cursor: default;}
.newinput:focus{cursor: text;}
.input_div{ width:150px;border: 1px solid #ddd; border-radius: 0 0 3px 3px; display: none;}
.soption{display: block; padding: 2px 5px;}
.soption:hover{background: #f9f9f9; border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; padding: 1px 5px;}
</style>

<div class="pre" id="input1">
<input class="newinput" type="text" placeholder="--请选择1--">
<div class="input_div" style="display: none;">
<span class="soption" data-val="1">01</span>
<span class="soption" data-val="2">02</span>
<span class="soption" data-val="3">03</span>
<span class="soption" data-val="4">04</span>
<span class="soption" data-val="5">05</span>
<span class="soption" data-val="6">06</span>
<span class="soption" data-val="10">101</span>
<span class="soption" data-val="20">102</span>
<span class="soption" data-val="30">103</span>
<span class="soption" data-val="40">104</span>
<span class="soption" data-val="50">105</span>
<span class="soption" data-val="60">106</span>
</div>
<input class="savedata" type="hidden" value=''>
<div style="clear:both"></div>
</div>
<div class="pre" id="input2">
<input class="newinput" type="text" placeholder="--请选择2--">
<div class="input_div" style="display: none;">
<span class="soption" data-val="1">01</span>
<span class="soption" data-val="2">02</span>
<span class="soption" data-val="3">03</span>
<span class="soption" data-val="4">04</span>
<span class="soption" data-val="5">05</span>
<span class="soption" data-val="6">06</span>
<span class="soption" data-val="10">101</span>
<span class="soption" data-val="20">102</span>
<span class="soption" data-val="30">103</span>
<span class="soption" data-val="40">104</span>
<span class="soption" data-val="50">105</span>
<span class="soption" data-val="60">106</span>
</div>
<input class="savedata" type="hidden" value=''>
<div style="clear:both"></div>
</div>

<script type="text/javascript">
function inputSelect(div_id,saveval_id){
this.input_id=$("#"+div_id+' .newinput');
this.input_div=$("#"+div_id+' .input_div');
this.input_id.focus(function(){
$("#"+div_id+' .input_div').show();
});
this.input_id.keyup(function(){
var st = $(this).val().trim();
var _this=this;
if(st == ''){
$("span",$("#"+div_id+' .input_div')).show();
$("#"+div_id+' .input_div').show();
var selval=0;
$(".savedata",$("#"+div_id)).val(selval);
return false;
}
var L = $("span",$("#"+div_id+' .input_div')).size();
for(var i = 0; i < L; i ++){
var elem=$("span",$("#"+div_id+' .input_div')).eq(i);
var html = $("span",$("#"+div_id+' .input_div')).eq(i).html();
if(html.match(st)){
elem.show();
}
else{
elem.hide();
}
}
var selval=-1;
if($("span:visible",$("#"+div_id+' .input_div')).length==1 || $("span:visible",$("#"+div_id+' .input_div')).eq(0).html()==st){
selval= $("span:visible",$("#"+div_id+' .input_div')).eq(0).attr('data-val');
}
else{
selval=99999;
}
$(".savedata",$("#"+div_id)).val(selval);
$("#"+div_id+' .input_div').show();
});
this.input_id.blur(function(){
$("#"+div_id+' .input_div').slideUp(50);
});
$("span",$("#"+div_id+' .input_div')).mousedown(function(){
var val = $(this).data('val');
$("#"+div_id+' .newinput').val($(this).html());
$(".savedata",$("#"+div_id)).val(val);
})
}
new inputSelect("input1","txt1");
new inputSelect("input2","txt2");
</script>

</body>
</html>

其中用到了一张小的背景图，我直接用附件上传！
图片：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航