javascriptjquerylivesearch

jQuery Live Search twice on one web site

I have the following JQuery Live Search, which works fine. This is the JQuery part:

<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){

                $.get("livesearch/searchschule.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
        } else{
            resultDropdown.empty();
        }
    });

    // Set search input value on click of result item
    $(document).on("click", ".result option", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>

This is the html part:

<div class='search-box' style='width: 95%;'>
    <input type='text' name='Schule' autocomplete='off' placeholder='Schule suchen'>
    <div class='result'></div>
</div>

So this Live Search works and sets the results in a dropdown.

Now I want to have two Live Search input fields. A second one, that lists results of another query.

I tried to give the <div> an id or name and set the following if-else-statement:

if ($('.search-box').attr('id') == '0'){ ... }

But that didn't work, as I added the second input field. The second sql-query is stored in its own php-file.

The second one should be also called 'search-box' and also should 'result' doesn't have another name, because of the styling.

So is there a way? Thanks in advance.

Solution

  • You can add a data attribute on your input field which will store the name of query file.

    Now in your get search results function, you can build url like this

    var searchUrl = 'livesearch/' + $(this).data('filename') + '.php';

    Here filename is the data attribute in your input field.

    You can set it like data-filename='searchschule' in your input html tag.

    Rest all should work fine. Just add another html div. Also make sure that you add a correct filename as its data attribute.