jquery实现下拉选的模糊查询功能

来源:互联网 发布:单片机数据类型 编辑:程序博客网 时间:2024/03/29 02:00
html部分: text框作为下拉选选中项展示部分;
ul做下拉选;  
<input class="s-form-inp" placeholder="选择交易员" type="text" name="followMemberName"
id="followMemberName" placeholder="请填写" AutoComplete="off" style="width:165px;"/>
<ul id="showLike" class="in-keyword-ul-invoiceUnitName" style="width:171px;display: none">
#foreach($item in $!{sellerList})
<li style="display: none" data-valueid="${item.salerId}">$!{item.sapCode}&nbsp;$!{item.name}
</li>
#end
</ul>

js逻辑部分:
$("#followMemberName").on("focus keyup", function (event) {
event.preventDefault();
var text = $('#followMemberName').val();
if (text == '') {
$('#showLike').find('li').each(function () {
var _this = $(this);
_this.show();
});
} else {
if (text.length < 1) {
return false;
}
$('#showLike').find('li').each(function () {
var _this = $(this);
var productNameText = _this.text();
if (productNameText.indexOf(text) >= 0) {
_this.show();
} else {
_this.hide();
}
});
}
$('#showLike').show();
return false;
});