PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > Jquery插件 > jQuery筛选排序 > 正文

    fastLiveFilter.js输入自动过滤功能演示实例

    作者:admin来源:B5教程网浏览:时间:2014-04-30 21:50:06我要评论
    分享到

    内容介绍

    类似于搜索框的输入提示功能,实现对匹配项目的自动过滤功能,当你输入的时候,会根据输入的字符智能匹配符合的内容,自动列出来,提高人性化操作体验,如果您对jquery.fastLiveFilter.js插件的用法感兴趣,这是个很不错的例子。
    使用方法
    fastLiveFilter这是jQuery过滤器插件,超轻量级(大小只有2K),用法简单执行效率高。
    包括jQuery的插件,然后初始化插件:
    <script src="jquery-1.6.4.min.js"></script>
    <script src="jquery.fastLiveFilter.js"></script>
    <script>
        $(function() {
            $('#search_input').fastLiveFilter('#search_list');
        });
    </script>
    上述将与此HTML:
     
    <input id="search_input" placeholder="Type to filter">
    <ul id="search_list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    选项
    选项给出的第二个参数:
    $(INPUT_SELECTOR).fastLiveFilter(LIST_SELECTOR, options);
    可用的选项:
    超时:有多少毫秒的keydown后等待过滤列表之前。默认值是0。
    回调:回调方法,该方法将得到保留在列表中的项目数。
    选择:默认情况下,该插件将匹配滤波器对的文字里。如果具体确定,选择将被应用到李和由此产生的文本将被代替使用。警告:使用复杂的选择可能会显著降低性能,特别是在大名单!
    例如:
     
    $('#search_input').fastLiveFilter('#search_list', {
        timeout: 200,
        callback: function(total) { $('#num_results').html(total); }
    });
    下载资源:152 下载积分:0
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-90-171-1.html
    相关热词搜索: fastLiveFilter 自动过滤