JQuery Listview максимальное количество строк в фильтре - PullRequest
Новая
       30

JQuery Listview максимальное количество строк в фильтре

0 голосов
/ 26 сентября 2019

У меня большой набор данных, который содержит имена пользователей.Я прикрепил это к списку jquery, который настроен для фильтра-открытия.

Я хотел бы иметь возможность ограничить количество строк, которые возвращает фильтр.

Я знаю, какпереопределить фильтр, чтобы создать пользовательский поиск, но я не знаю, как ограничить количество элементов в списке (что побудит пользователя добавить дополнительную информацию в фильтр)

Скажем, я только хотел показать2 результата, если пользователи содержали Тома, Томми и Тони, а фильтр был «Кому», и ожидали увидеть только Тома и Томми.

1 Ответ

0 голосов
/ 26 сентября 2019

Вы можете прослушать событие keyup и отфильтровать элементы без класса ui-screen-hidden, который фильтр-раскрытие добавляет к элементам списка.Используя each итерацию по этим отфильтрованным элементам, вы можете условно скрыть их, используя значение индекса.

В приведенном ниже фрагменте я проверяю, является ли индекс каждого элемента больше 1 (второй элемент), и скрываю их. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

  <script>
    $(document).ready(() => {
      $(".ui-input-text").keyup(() => {
        $("li").not(".ui-screen-hidden").each(function (i, obj) {
          i > 1 && $(this).hide();
        });
      })
    })
  </script>
</head>

<body>
  <div data-role="page">
    <div data-role="content">
      <ul data-role="listview" data-filter="true" data-filter-placeholder="Search numbers without hint..."
        data-inset="true" data-filter-reveal="true">
        <li data-filtertext="thirtyone">thirtyone
        </li>
        <li data-filtertext="thirtytwo">thirtytwo
        </li>
        <li data-filtertext="thirtythree">thirtythree
        </li>
        <li data-filtertext="thirtyfour">thirtyfour
        </li>
        <li data-filtertext="thirtyfive">thirtyfive
        </li>
      </ul>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...