zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    js的style.width取不到元素的宽度值
    git bush 无法使用箭头进行选择
    exports module.exports export export default之间的关系
    vue前端项目中excel文件下载
    vue -- router路由跳转错误 , NavigationDuplicated
    node url模块
    SSO CAS 单点系列
    离线电脑搭建开发环境
    Shader的语法
    NavMesh名字、层索引、层值之间的转换
  • 原文地址:https://www.cnblogs.com/margarita/p/5512328.html
Copyright © 2011-2022 走看看