您的位置:首页 > Web前端 > JQuery

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

2017-08-29 16:38 756 查看
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} $!{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;

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: