js实现列表内容的自动搜索

在平台开发中，通过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();
            }
        }); 
    })