通过js对已加载列表进行自动搜索

       一、 实际项目中，在列表搜索展现过程中通常采用两种方法实现：

1)每次点击搜索调用后台接口，实时展现列表内容

   优点：列表内容过多时，可以单独调用接口返回需要的数据

   缺点：每次搜索调用接口，数据交互太频繁且需要一定响应时间

2)初始加载列表所有内容，通过前端js搜索需要的内容

    优点：一次加载，后面筛选不用从数据库取数据，减少交互

    缺点：初始加载内容过多时，需要较长的响应时间

 

     项目中列表加载内容不是很多，所以采用第二种方式：

     1)列表和搜索页面元素

            <!-- 列表展示内容 -->
            <div class="m-content" id="js-content">//基于该id，焦点定位后填充列表内容
            <div style="display:inline;white-space: nowrap;" id="bread" class="inbox-header">
                                <!-- <h3 style="display:inline;" class="maidiancase">埋点用例</h3> -->
                                <!-- <input style="margin-left:860px;" type="button" value="创建任务" οnclick="editCase()"> -->
            </div>
            <!-- 展示列表搜索 -->
            <div style="padding-top:20px" id="js-search">
                <input type="text" id="js-maidianId" class="form-control_text"
                style="text-align: center; width: 105px" placeholder="请输入埋点名称"/>
            </div>

        2)实时搜索js

<script>
/* 实现列表内容输入自动搜索 */
function filterList(list) {
    $('#js-maidianId').bind('input propertychange', function() {
        var filter = $(this).val();
        if (filter) {
            $matches = $(list).find('td:Contains(' + filter + ')').parent();
            $('tbody tr', list).not($matches).slideUp();//tbody tr是仅对列表中tr内容进行拼接，thead展示内容不影响
            $matches.slideDown();
        } else {
            $(list).find("tr").slideDown();
        }
    });
}
/* 焦点定位下拉内容收放效果 */
$(function() {
    filterList($("#js-content"));
})
</script>

     3)搜索效果图：