可以輸入的下拉框,可以篩選內容,可輸入篩選下拉框(原創)
阿新 • • 發佈:2019-02-09
<!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>
其中用到了一張小的背景圖,我直接用附件上傳!