jquery效果摘要

一、过滤

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<link rel='stylesheet' href='demo.css'>
<script type="text/javascript" src='jquery/dist/jquery.min.js'></script>
<script type="text/javascript" src='demo.js'></script>


</head>
<body>
<div class="jq22">
<input id="search_input" placeholder="输入文字开始筛选">
<ul id="search_list">
    <li>哈哈</li>
    <li>刚刚</li>
    <li>坨坨</li>
    <li>宝宝</li>
    <li>那你</li>
    <li>慢慢</li>
    <li>等待</li>
    <li>上市</li>
    <li>啊啊</li>
    <li>这种</li>
    <li>现象</li>
    <li>问我</li>
    <li>请求</li>
</ul>
</div>
</body>

<script>
//jquery.fastLiveFilter.js
jQuery.fn.fastLiveFilter = function(list, options) {
    options = options || {};
    list = jQuery(list);
    var input = this;
    var lastFilter = '';
    var timeout = options.timeout || 0;
    var callback = options.callback || function() {};
    var keyTimeout;
    var lis = list.children();
    var len = lis.length;
    var oldDisplay = len > 0 ? lis[0].style.display : "block";
    callback(len);
    input.change(function() {
        var filter = input.val().toLowerCase();
        var li, innerText;
        var numShown = 0;
        for (var i = 0; i < len; i++) {
            li = lis[i];
            innerText = !options.selector ? 
                (li.textContent || li.innerText || "") : 
                $(li).find(options.selector).text();
            if (innerText.toLowerCase().indexOf(filter) >= 0) {
                if (li.style.display == "none") {
                    li.style.display = oldDisplay;
                }
                numShown++;
            } else {
                if (li.style.display != "none") {
                    li.style.display = "none";
                }
            }
        }
        callback(numShown);
        return false;
    }).keydown(function() {
        clearTimeout(keyTimeout);
        keyTimeout = setTimeout(function() {
            if( input.val() === lastFilter ) return;
            lastFilter = input.val();
            input.change();
        }, timeout);
    });
    return this;
}
 $(function() {
        $('#search_input').fastLiveFilter('#search_list');
    });
</script>
</html>

 

posted @ 2016-05-20 15:42  刘羽惜  阅读(137)  评论(0)  编辑  收藏  举报