Search code examples
javascriptjqueryajaxquick-search

QuickSearchJS with ajax call


I'm using QuickSearchJS and it is working as expected until ajax call is made and then it doesn't work. I have tried 2 ways. Is there a way to use it with document.on function or any alternate way?

1st way

$(function () {
    var qs = $('input#filterText').quicksearch('#a option')
});

2nd way:

$(document).ready(function() {
    $(function () {
        var qs = $('input#filterText').quicksearch('#a option')
    });
});

Solution

  • According to the documentation you should use qs.cache(); after your ajax call.

    var qs = $('input#id_search_list').quicksearch('ul#list_example li');
    $('ul#list_example').append('<li>Loaded with Ajax</li>');
    qs.cache();
    

     var qs=$('input#search').quicksearch('table tbody td');
    
     $("#append").on("click", function(e) {
         $("tr").append('<td>'+$("#search").val()+'</td>');
         qs.cache();
     });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.2.0/jquery.quicksearch.min.js"></script>
    /* Example form */
    <form>
        <input type="text" id="search">
        <input type="button" id="append" value="ajax">
    </form>
    
    /* Example table */
    <table>
        <tbody>
            <tr>
                <td>Test cell</td>
                <td>Another test cell</td>
            </tr>
        </tbody>
    </table>