您的位置：首页 > 其它

仿下拉框，可选择，可输入，可匹配

2015-11-19 15:13 281 查看 
<!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="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<style type="text/css">
#page{width: 500px; margin: 0 auto; text-align: left;}
#test{width: 212px; padding: 2px; height: 22px; border: 1px solid #ddd; margin: 0 5px 0 0;}
#test option{padding: 2px 5px;}
#test option:first-child{display: none;}
#pre{position:relative; float: right;}
#itest{width: 190px; padding: 2px 15px 2px 5px; margin-bottom: -1px; background: url(http://bbs.blueidea.com/data/attachment/album/201410/28/114755leueqeys1ps8dtzy.jpg.thumb.jpg) no-repeat scroll right center; border: 1px solid #ccc; box-shadow: 0 1px 0 0 #eee inset; cursor: default;}
/*#itest:focus{cursor: text;}*/
#dtest{width: 210px; 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 id="page">
<select id="test" name="test" style="display:none">
<option value="0">--请选择--</option>
<option value="1">1</option>
<option value="2">12</option>
<option value="3">13</option>
<option value="4">14</option>
<option value="5">16</option>
<option value="6">17</option>
<option value="10">101</option>
<option value="20">102</option>
<option value="30">103</option>
<option value="40">104</option>
<option value="50">105</option>
<option value="60">106</option>
<option value="60">106</option>
<option value="60">106</option>
</select>
</div>

<script type="text/javascript">
(function($){
var input = '<div id="pre"><input id="itest" type="text" placeholder="--请选择--">';
var strDiv = '<div id="dtest">';
var strSpan = '';
var L = $('#test option').size();

for(var i = 1; i < L; i ++){
strSpan += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
}
strDiv += strSpan + '</div></div>';
$('#test').after(input + strDiv);
//初始化结束
//
//
$(document).on('focus','#itest',function(){//获得焦点，模仿select，显示模拟下拉框
var st = $(this).val().trim();
if(st == ''){
$('#dtest').html(strSpan);
}
else{
var strDiv2 = '';
for(var i = 0; i < L; i ++){
var html = $('#test option').eq(i).html();
if(html.match(st)){
strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
}
}
$('#dtest').html(strDiv2);
}
$('#dtest').slideDown(100);  //以滑动方式显示隐藏
});

$(document).on('blur','#itest',function(){//失去焦点，隐藏模拟下拉框
$('#dtest').slideUp(250); //以滑动方式显示隐藏的
});

$(document).on('keyup','#itest',function(){//输入信息，自动匹配，暂时不支持鼠标右键
var st = $(this).val().trim();
if(st == ''){
$('#dtest').html(strSpan);
return false;
}
var strDiv2 = '';
for(var i = 0; i < L; i ++){
var html = $('#test option').eq(i).html();
if(html.match(st)){
strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
}
}
$('#dtest').html(strDiv2);
});

$(document).on('mousedown','.soption',function(){//选择下拉选项
var html = $(this).html();
var val = $(this).data('val');
$('#itest').val(html).data('val',val).blur();
$('#test').val(val);
});

})(jQuery);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  下拉框-输入-匹配
相关文章推荐
新的分享
章节导航