PHP Ajax Live Search with multiple values

Question

I have a live php live search which populates results like dropdown when text is written in text input. What I need is to add another element to dropdwon to search for active/inactive, here's my code current:

EDIT

I was able to receive the dropdown value in php with this code:

HTML:

<input type="text" id="search" autocomplete="off">
<select id="status" name="status">
    <option value="1" selected="selected">ACTIVE</option>
    <option value="0">INACTIVE</option>
</select>
<!-- Show Results -->
<h4 id="results-text"></h4>
<ul id="results"></ul>

JavaScript:

$(document).ready(function() {  

    function search() {
        var query_value = $('input#search').val();
        var status_value = $('input#status').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "searchtop.php",
                data: { query: query_value, status: status_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").live("keyup", function(e) {
        clearTimeout($.data(this, 'timer'));

        var search_string = $(this).val();

        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        };
    });

});

Only problem now is that after selecting status, I have to click into input and press any arrow key to get the records as per selected status.

Answer 1

You're listening to input field only. You should also check whether select element has been changed.

function doStuff(){
    clearTimeout($.data(this, 'timer'));
    var search_string = $("#search").val();
    if (search_string == '') {
        $("#results").fadeOut();
        $('#results-text').fadeOut();
    }else{
        $("#results").fadeIn();
        $('#results-text').fadeIn();
        $(this).data('timer', setTimeout(search, 100));
    };
}

// please read my note at the bottom
$("#search").on("keyup", function(e) {
    doStuff();
});
$("#status").on("change", function(e) {
    doStuff();
});

Change $('input#status').val(); to $('#status').val(); as it's select element, not input.

BTW. You don't have to use 'tag#id' . This might be usefull when referencing to different elements with the same class name like 'div.class' and 'span.class' . Once each element has unique identifier (as it have to), using 'tag#id' is pointless.

Note:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

jQuery .live()

jQuery .on()