Объедините функции JavaScript для совместной работы

Question

Я создаю форму поиска, которая фильтрует результаты на основе ввода текста, а также выбирает параметры из четырех отдельных раскрывающихся списков (категория, подкатегория, местоположение и т. Д.).

Следующие две функции работают хорошо, но я только что понял, что если я наберу поисковый термин во вводе, сделаю выбор в раскрывающемся списке, а затем вернусь и введу другой поисковый термин, мои выпадающиеигнорируются.

Я нашел решения для подобных проблем на этом сайте, но ничего, что относится к моей конкретной ситуации.

Это фильтр для выпадающих списков :

$("select.filterby").change(function(){
    var filters = $.map($("select.filterby").toArray(), function(e){
        return $(e).val();
    }).join(".");

    $("div#flatdiv").find("article").hide();
    $("div#flatdiv").find("article." + filters).show();
});

, а вот фильтры, основанные на результатах поиска:

$(document).ready(function(){
    $("#title").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#flatdiv article").filter(function() {

            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
   });
});

Один использует true .filter(), а другой использует .find до show() и hide().

Я не уверен, куда идти отсюда.Я делал разные попытки, но каждая из них не дает результатов, так что я надеюсь, что кто-то может мне помочь.

ОБНОВЛЕНИЕ: Вот финал, который прекрасно работал!

//apply selection form any drop down forms
$("select.filterby").change(function(){
   var filters = $.map($("select.filterby").toArray(), function(e){
      return $(e).val();
   }).join(".");
   $("div#flatdiv").find("article").addClass("hidden-by-category-filter");
   $("div#flatdiv").find("article." + filters).removeClass("hidden-by-category-filter");
});

//apply text input from search form
$("#title").blur(function(){
   var textFilters = $(this).val().toLowerCase();
   $("article:contains(" + textFilters +")").removeClass("hidden-by-text-filter");
   $("article:not(:contains(" + textFilters +"))").addClass("hidden-by-text-filter");
});

Answer 1

В таких случаях вместо использования .hide() и .show() часто лучше просто добавить классы CSS в элементы, чтобы скрыть их.

Я бы создал классы, такие как .hidden-by-text-filter и .hidden-by-category-filter, каждый из которых по отдельности скрывал бы элементы:

.hidden-by-text-filter, .hidden-by-category-filter {
    display: none;
}

Затем в обработчике событий просто добавьте или удалите определенный класс. Например, обработчик события при вводе текста будет добавлять / удалять класс .hidden-by-text-filter, а выпадающий список категорий будет добавлять / удалять класс .hidden-by-category-filter.

$("select.filterby").change(function() {
  var filters = $.map($("select.filterby").toArray(), function(e) {
    return $(e).val();
  }).join(".");

  $("div#flatdiv").find("article").addClass(".hidden-by-text-filter");
  $("div#flatdiv").find("article." + filters).removeClass(".hidden-by-text-filter");
});

Таким образом, оба этих фильтра не будут мешать друг другу. Если элемент должен быть скрыт через оба критерия, он будет иметь оба этих класса и все еще оставаться скрытым. Если один из таких элементов станет видимым одним из фильтров, он все равно будет иметь другой класс и останется скрытым.