CODEWITHSUNDEEP
javascriptjqueryhtmljson
Serejqa
Serejqa

Reputation: 59

LiveFilter in divs

I'v got a question about LiveFilter. Or how to make it in another way without LiveFilter it is not so important. So iv got the page and got divs which are making from JSON file. And my filter is not working. So i got my page like this Before And when im start searching by the name or number it should be like this AfterShouldBe So im using 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>

So could someone tell me where is the problem And here is my rar with files (html, css, js, json)

Upvotes: 1

Views: 106

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Forget about liveFilter.js...
Your HTML is too complex for it.

I made a pretty small script for you.... Customized for your web page.

How it works:
On the input event, hide all rows.

Then search the inputted value within <name>, <number> and <city> content... For each rows, using the JavaScript method .indexOf().

If the search term is found, this row must be displayed.

// 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");
        }
    });
});

Place it inside the document ready wrapper, just below the $.getJSON function.
Live link!



EDIT:
For case insensitive search:

Only one line to change:

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

Upvotes: 1

Related Questions