Блог

Главная - Вопросы по программированию - Как заставить мою панель поиска работать, чтобы она могла вызывать более одной переменной

Как заставить мою панель поиска работать, чтобы она могла вызывать более одной переменной

#javascript #json #searchbar

#javascript #json #панель поиска

Вопрос:

Прямо сейчас у меня есть панель поиска на моем веб-сайте, и ее единственная функция — вызывать категории в моем списке.

изображение моего веб-сайта

Но мой поиск по фильтру справа уже делает это. Итак, мне было интересно, может ли кто-нибудь помочь мне понять, как запрограммировать панель поиска для поиска продуктов вместо этого, чтобы любой, кто попадает в мой список, мог получить свои результаты из них.

продукты

Ниже приведен код, который у меня есть, и, опять же, он позволяет моей панели поиска выполнять поиск только по категориям.

    

var array_html = "";
    var data_array = boroughs[property];
    for (var i in data_array) {
      array_html  =
        "<b>"   "<u>" 
        data_array[i]["business"]  
        "</b></u><br />"   "<i>"  
        data_array[i]['adderess']  
        "</i>" 
        data_array[i]['owner']    
        "<br />" 
         '<a href="http://' 
        data_array[i]['website']   '" target=_blank" title="Opens in a new window">'   
        data_array[i]['website']  '</a>' 
             data_array[i]['neighbourhood']  
              "<br />" 
               '<a href="' 
              data_array[i]['maps']  '" target=_blank" title="Opens in a new window">'   
              '<p> Open Maps </p>'  '</a>'  "<p class='products'>"  //products is defined
data_array[i]["products"]  '</p>'  
        "<br />"    "<br />";
    }

    var collapse_html =
      '<div class="collapse show" id="'  
      property.split(" ").join("_")  
      '">'  
      '<div class="card card-body">'  
      array_html  
      "</div>"  
      "</div>";
    final_html  = boroughs_html   collapse_html;
  }
  return final_html;
}
//search functionality


    const search_btn_input = document.getElementsByClassName(
      "search_btn_input "
    )[0];
    const categories = document.getElementsByClassName("category_name");
    const products = document.getElementsByClassName("products");

    search_btn_input.addEventListener("input", (e) => {
      var search_key = search_btn_input.value.toUpperCase(); 


      for (var i in categories) {
        var category_name = categories[i].innerHTML;
        var products_name = products[i].innerHTML;
        if (category_name != undefined) {
          category_name = category_name.toUpperCase();
        } else {
          return;
        }



    //search button recognizing the word
        if (category_name.includes(search_key)) {
          categories[
            i
          ].parentElement.parentElement.parentElement.parentElement.style.order = -1;
        } else {
          categories[
            i
          ].parentElement.parentElement.parentElement.parentElement.style.order = 0;
        }
      }
    });

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

Комментарии:

1. Как этот вопрос связан с таблицами Google?

2. вся информация о каждом бизнесе извлекается из таблиц Google, а панель поиска вызывает информацию по категориям, я просто хочу знать, как заставить ее вызывать продукты вместо этого. Это не вопрос о таблицах Google, я просто добавил это на случай, если это имело значение.