在平台开发中,通过Ajax返回列表内容,因内容太多但又想快速检索需要内容,所以通过搜索实现,过程如下,
1、列表HTML代码如下:
<div style="border:1px solid #169ef4;width:135px;position:relative;left:15px;background-color:#169ef4;bottom:10px"> <lable style="color:#fff">搜索</lable>
<input type="text" id="js-groupId" class="form-control_text" style="text-align:center;width:105px" placeholder="请输入计划名称">
</div>
<ul class="inbox-nav margin-bottom-10" id="project">
<li class="compose-btn" id="ps" >
<!-- <a οnclick="addPlan()" data-title="Compose" class="btn green">
<i class="fa fa-edit"></i> 创建计划</a> -->
</li>
<li class="compose-btn" id="ps" >
<select id="projectNames" οnchange="loadPro()" name="requestMethod" class="form-control">
<option value="0" >我创建的</option>
<option value="1" >我可见的</option>
<option value="2" >查看全部</option>
</select>
<li>
</ul>
注意:以上HTML代码片段最上面是输入搜索内容,根据内容检索;下面实现的是根据不同的筛选项:“我的创建”“我可见的”“查看全部”进行筛选,特别注意关注id="js-groupId"、id="project",下面的js筛选就是基于id定位的。
2、自动搜索js
/* 搜索过滤筛选方法 */
/* 不区分大小写 */
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
}
function filterList(list) {
$('#js-groupId').bind('input propertychange', function() {
var filter = $(this).val();
if (filter) {
$matches = $(list).find('a:Contains(' + filter + ')').parent();
$('li', list).not($matches).slideUp();
$matches.slideDown();
} else {
$(list).find("li").slideDown();
}
});
}
/*焦点定位下拉内容收放效果*/
$(function() {
filterList($("#project"));
$('#js-groupId').bind('focus', function() { //根据id=js-groupId绑定焦点元素
$('#groupid').slideDown(); //展示下拉内容
}).bind('blur', function() { //收缩内容
$('#groupid').slideUp();
})
$('#project').on('click', 'li', function() {
$('#js-groupId').val($(this).text())
var filter = $('#js-groupId').val();
if (filter) {
$matches = $(list).find('a:Contains(' + filter + ')').parent();
$('li', list).not($matches).slideUp();
$matches.slideDown();
} else {
$(list).find("li").slideDown();
}
});
})