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

在平台开发中，通过Ajax返回列表内容，因内容太多但又想快速检索需要内容，所以通过搜索实现，过程如下，

1、列表HTML代码如下：

搜索
                    
                

                        
• 
                              
                          

                           
• 
                              
                                  我创建的
                                  我可见的
                                  查看全部
                              
                          
• 
                      

注意：以上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();
            }
        }); 
    })