Как выполнять поиск в нескольких окнах поиска

#jquery #asp.net-mvc

Вопрос:

Как я могу выполнять поиск, используя 2 или более полей поиска одновременно? Я сделал что-то вроде этого:

Вид:

 <th>
  <p>
      Nr account: @Html.TextBox("Account")
      <input type="button" id="search" value="Search" />
  </p>

  <p>
      Nr invoice: @Html.TextBox("Invoice")
      <input type="button" id="search" value="Search" />
  </p>
</th>

jQuery:

 $('#search').click(function () {

    var value = $("#Account, #Invoice").val().toLowerCase();

    $("#myTable tr").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    });

Вообще говоря, когда я нажимаю «Поиск», таблица фильтруется по значению первого поля поиска — «Учетная запись». Я бы хотел, чтобы таблица фильтровалась по значениям из обоих полей поиска, где ошибка?

1. Привет, обе ваши кнопки id одинаковы, поэтому они работают для первой кнопки, а не для второй. Вместо этого используйте class .

2. @Swati это хороший момент, спасибо, но он все равно не работает. Даже когда я передаю одно значение поля поиска (например, «Учетная запись») var value и нажимаю кнопку «Поиск», это не работает. Не знаю, работает ли это с классами.. Я думаю, что также неправильно присваивать значения var value Как я могу вызвать функцию поиска под .search кнопкой для обоих полей?

Ответ №1:

Вам нужно использовать class селектор вместо id и при нажатии кнопки получать оба значения отдельно и просто сравнивать оба значения внутри each цикла.

Демонстрационный код :

 $('.search').click(function() {
//get both values
  var value = $("#Account").val().toLowerCase();
  var value2 = $("#Invoice").val().toLowerCase();
  $("#myTable tbody tr").filter(function() {
  var texts =$(this).text().toLowerCase()
  //check both condition 
    $(this).toggle(texts.indexOf(value) > -1 amp;amp; (texts.indexOf(value2) > -1))
  });

});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>
        <p>
          Nr account<input type="text" id="Account">
          <input type="button" class="search" value="Search" />
        </p>

        <p>
          Nr invoice:<input type="text" id="Invoice">
          <input type="button" class="search" value="Search" />
        </p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Xavier</td>
      <td>41</td>
    </tr>
    <tr>
      <td>Muska</td>
      <td>38</td>
    </tr>
    <tr>
      <td>Swati</td>
      <td>45</td>
    </tr>

  </tbody>
</table>

1. Да, это работает! Отлично, спасибо, Свати! Еще один вопрос: когда я дополнительно хочу фильтровать по выбранному параметру в выпадающем списке, например: @Html.DropDownList("filterList", new List<SelectListItem>{new SelectListItem { Text="", Value= "", Selected=true},new SelectListItem { Text="Payment", Value="Payment"},}) затем я добавляю var value3 = $("#filterList").val(); и проверяю это дополнительное условие здесь: $(this).toggle(texts.indexOf(value) > -1 amp;amp; (texts.indexOf(value2) > -1 amp;amp; (texts.indexOf(value3) > -1)) Правильно?

2. Да, вам просто нужно добавить это условие. Дайте мне знать, если это не сработало 🙂

3. Я добавил $("#filterList:selected") , и это работает. Спасибо!

4. К сожалению, он не работает вместе с другими полями поиска, я проверил его еще раз.