Блог

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

Как создать фильтр поиска, в котором вы можете искать только определенный элемент в наборе разделов?

#javascript #jquery #filter

Вопрос:

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

 <div id="searchFilter" class="flexColumn">
      <label for="searchFilterText">Search for Community Halls</label>
      <input type="text" id="searchFilterText" placeholder="Search for the name of a community hall">
</div>

`<div class="hall">
      <div class="info">
          <p>${data.Halls[halls[i]].Location[0].Address}, ${data.Halls[halls[i]].Location[1].Suburb}<br>Capacity: ${data.Halls[halls[i]].Room[0]["Standing Capacity"]}</p> 
      </div>
      <div class="image">
          <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]]["Hall Name"]}">
      </div>
      <div class="hallNameBox">
           <p class="hallName">${data.Halls[halls[i]]["Hall Name"]}</p>
      </div>
 </div>`;

$(document).ready(function(){
  $("#searchFilterText").on("keyup", function() {
    let value = $(this).val().toLowerCase();
    $(".hall").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

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

1. Вы можете проверить, если после фильтрации, если ни один из div не виден, вы можете показать все . div зала, что означает, что пользователь не ввел имя зала.

Ответ №1:

Вместо использования toggle используйте show и hide .

(Используйте one , two , или three для проверки этого сокращенного примера).

 $(function() {
  $("#searchFilterText").on('keyup', function() {

    // Grab the value
    const value = $(this).val().toLowerCase();

    // If it's not empty
    if (value) {

      // `filter` all the hall elements if
      // the text of the hallName element doesn't start with
      // the value and hide them
      $('.hall').filter(function() {
        const text = $(this).find('.hallName').text().toLowerCase();
        return !text.startsWith(value);
      }).hide();

    // Otherwise show them
    } else {
      $('.hall').show();
    }
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchFilter" class="flexColumn">
<input type="text" id="searchFilterText" />
</div>

<div class="hall">
  <div class="hallNameBox">
    <p class="hallName">One</p>
  </div>
</div>
<div class="hall">
  <div class="hallNameBox">
    <p class="hallName">Two</p>
  </div>
</div>
<div class="hall">
  <div class="hallNameBox">
    <p class="hallName">Three</p>
  </div>
</div>

Ответ №2:

 $(document).ready(function(){
  $("#searchFilterText").on("keyup", function() {
    let value = $(this).val().toLowerCase();
    $(".hall *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Это то, чего ты хочешь? Если нет, дайте мне знать.

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

1. Нет, извини. Мне нужно только иметь возможность ввести название зала, а для тех, которые не совпадают, удаляется весь раздел зала. Если емкость или местоположение ищутся, ничего не должно произойти.

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

3. не совсем так. вот как это выглядит: imgur.com/JKjNDap Я хочу, чтобы в ящике зала акации ридж было все, что в нем находится, когда вы его ищете, и чтобы эти черные ящики исчезли и вы видели только залы, соответствующие поиску (который в данном случае только один).

Метки: ,