javascript - div 中的 LiveFilter

Question

我有一个关于 LiveFilter 的问题。或者如何在没有 LiveFilter 的情况下以另一种方式制作它并不那么重要。所以 iv 获取了页面并获取了由 JSON 文件制作的 div。而且我的过滤器不起作用。所以我得到了这样的页面 Before当我开始按名称或号码搜索时，它应该是这样的 AfterShouldBe所以我使用 jquery.livefilter.js

    <script> // Reading DATA from JSON
    $(document).ready(function(){
        $.getJSON("accounts.json", function(data){
            $.each(data, function(key, value){
                $("#main_list").append(
                        buildRow(value.name
                                ,value.number
                                ,value.city,value.amount,value.currency,value.rate)
                );
            });
        });
    });
</script>
<script>
    $(function(){
        $('#livefilter-list').liveFilter('#livefilter-input', 'li', {
            filterChildSelector: 'a'
        });
    });
</script>
<script> // Making divs from JSON
    function buildRow(a,b,c,d,e,f){
        return '<ul id="livefilter-list"><div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\'); return false">\
    <div class="button_block">\
        <div class="div-for-button">\
            <input type="radio" name="on">\
        </div>\
    </div>\
    <div class="deposit-form-block-name">\
        <div class="deposit-form-block-name-first white-text"><name><li>'+a+'</li></name></div>\
        <div class="deposit-form-block-name-second white-text"><number><li>'+b+'</li></number></div>\
        <div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>\
    </div>\
    <div class="deposit-form-block-sum">\
        <div class="deposit-form-block-sum-text white-text">\
            <amount>'+d+'</amount><br><currency>'+e+'</currency>\
        </div>\
    </div>\
    <div class="deposit-form-block-perc">\
        <div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>\
    </div>\
</div>\
</ul>'
    }
</script>

有人能告诉我问题出在哪里吗这是我的 rar 文件(html、css、js、json)

Answer 1

忘记liveFilter.js ...
您的 HTML 太复杂了。

我为您制作了一个非常小的脚本......为您的网页定制。

工作原理:
关于input事件，隐藏所有行。

然后在<name>内搜索输入的值, <number>和<city>内容...对于每一行，使用 JavaScript 方法 .indexOf() .

如果找到搜索词，则必须显示此行。

// Custom search
$("#livefilter-input").on("input",function(){
    //console.log("Searching...");

    // Set ALL rows to display none.
    $(".deposit-small-block").css("display","none");

    // Loop to check the content of all custom tags: <name> <number> and <city>
    $(".tt").find(".deposit-form-block-name .white-text").children().each(function(){

        // If a matching text is found within name, account # or city
        if( $(this).html().indexOf( $("#livefilter-input").val() ) != -1 ){
            //console.log("FOUND a match!");

            // Set this row to display block.
            $(this).closest(".deposit-small-block").css("display","block");
        }
    });
});

将其放在文档就绪包装内，就在 $.getJSON 下方功能。
Live link!

编辑:
对于不区分大小写的搜索:

只需更改一行:

if( $(this).html().toLowerCase().indexOf( $("#livefilter-input").val().toLowerCase() ) != -1 ){