PHP Ajax Live Search с несколькими значениями

Question

У меня есть живой просмотр в реальном времени, который заполняет результаты, такие как выпадающий список, когда текст написан в текстовом вводе. Что мне нужно, чтобы добавить еще один элемент dropdwon искать активный/неактивный, вот мой текущий код:

EDIT

Я был в состоянии получить значение выпадающего в PHP с этим кодом:

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

}); 

Только проблема заключается в том, что после выбора статуса я должен щелкнуть по нему и нажать любую клавишу со стрелкой, чтобы получить записи в соответствии с выбранным статусом.

Answer 1

Вы слушаете только поле ввода. Вы также должны проверить, был ли выбран элемент select.

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(); 
}); 

Изменение $('input#status').val(); в $('#status').val();, как это выбрать элемент, а не вход.

BTW. Вам не нужно использовать 'tag#id'. Это может быть полезно при обращении к различным элементам с тем же именем класса, что и 'div.class' и 'span.class'. Как только каждый элемент имеет уникальный идентификатор (как это и должно быть), использование 'tag#id' бессмысленно.

Примечание:

По JQuery 1.7, метод .live() является устаревшим. Используйте .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate() в предпочтении .live().

jQuery .live()

jQuery .on()