Рубрики
Без рубрики

Используйте JS для Live -Filter. Список HTML – Часть 3

Элементы фильтра по критериям поиска или событиям фильтра по дате, используя JavaScript на статической странице. Tagged с JavaScript, NPM, Library, HTML.

Элементы фильтра по критериям поиска или на дату, используя JavaScript на статической странице ⏳

Используйте библиотеку JS 📦

Для более сложного поведения может иметь смысл использовать легкую библиотеку JS для более элегантного решения. Это можно добавить в ваш голова Теги вашей HTML -страницы без переписывания вашего приложения.

List.js пакет

Я хотел бы порекомендовать List.js , как у меня был успех с этим.

Пакет на NPM: npmjs.com/package/list.js

Связанный там сайт Docs объясняет, как использовать его для нескольких ситуаций. К сожалению, документы являются глюми, но если вы отслеживаете ссылки Codepen в Примеры репо Тогда вы можете добраться до ссылок.

Вы должны убедиться, что ваш HTML настроен для фильтрации и что ваш код JS ссылается на правильные атрибуты, которые я буду рассмотреть дальше.

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

Условия

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

Или может фильтровать на основе ввода пользователя – возможно, пользователь может выбрать месяц или категорию из списка DROP и увидеть только репо или сообщения в блоге, которые соответствуют этому.

Демо для фильтрации gh Repos

Я создал демонстрацию на Codepen здесь, чтобы продемонстрировать List.js , с комментариями, объясняющими необходимую настройку.

Первоначально показаны все репо (4) на странице, и вы можете ввести текст в Live Filter на именах репо.

Есть 3 части, чтобы работать, что я буду охватить дальше.

  • 1. HTML Control
  • 2. HTML Данные
  • 3. Поведение JavaScript

1. HTML Control 🎛

Первая часть – управление HTML, чтобы ваш пользователь мог искать.

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

2. HTML Данные

Вторая часть HTML устанавливает данные как контент для фильтрации.

Вот контент, показанный только одним элементом, для читаемости.





    
    

        
        

            artists-portfolio
        

        
Website with an image gallery, built on Jekyll and the Aperture theme

        
Commits: 77

Настройка поведения JavaScript

List.js Пакет загружен с использованием Скрипт ярлык. Эта настройка в настройках CodePen и так опущена из HTML -панели.

После List.js загружен, вы можете использовать Список объект. Смотрите панель JS в коде или фрагменте ниже.

var options = {
    valueNames: [
        {
            name: "list-name",
            attr: "data-name"
        }
    ]
};
var userList = new List("repos", options);

Здесь мы включаем фильтрацию на элементе, если ID Репо , мы говорим это имя поля Список имени и значение поля будет под атрибутом данные данных Анкет

Вы можете добавить больше элементов в Valuenames Если вы хотите фильтровать на описание или подсчет звезд или что -то еще, например.

Использование list.js на веб -сайте

Упрощенная демонстрация выше основана на одном из моих сайтов, где я применил List.js Чтобы отфильтровать мой полный список из более чем 100 репо. Это статический сайт на основе Jekyll, который размещен в NetLify.

Вот отметка для этой страницы:

Он использует шаблон Jekyll для создания карт репо, на основе данных, извлеченных из GitHub (в частности, с использованием GraphQL для получения тематических меток, не описанных в API REST).

Этот шаблон позволяет легко применять List.js занятия в больших масштабах. Кончик: Библиотека также поддерживает добавление элементов в список с использованием данных JS, если вы предпочитаете это по HTML -данным.

Вот шаблон для репо, в том числе List.js Атрибуты, такие как «list-name» и «data-name».

Запрос API против локальной фильтрации

Обратите внимание, что в этом случае все данные репо извлекаются во время сборки и отображаются как статический HTML на странице.

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

Предварительное выброс, а затем фильтрация локальных данных позже означает, что мне не нужно отдавать запросы API в GitHub API, чтобы получить репо при каждом поиске. Вы можете получить дроссельный Легко от API и получить ошибку, если вы делаете слишком много поисков. Кроме того, запрос API займет время и потребует, чтобы API был отзывчивым, когда фильтрация на локальных элементах HTML является непосредственной.

jQuery DataTables

Я также хочу упомянуть DataTables jQuery. Я кратко рассмотрю этот подход, так как не использовал его много, Я не знаю, насколько хорошо это работает за пределами таблиц.

JQuery поддерживает DataTables, что позволяет легко сортировать и фильтрацию таблицы.

Шаги по настройке:

  1. Загрузка актива jquery – JS.
  2. Загрузить активы DataTable JQUERY – CSS и JS
  3. Добавьте функцию JS.

Вот демонстрация Codepen, которую я сделал:

Вывод

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

Дайте мне знать в комментариях, какое ваше решение – вы нашли какие -нибудь подобные библиотеки JS, которые хорошо работают для этого, и которые имеют лучшую документацию?

Изображение предоставлено: @JtyLernix на Unsplash

Оригинал: “https://dev.to/michaelcurrin/use-js-to-live-filter-an-html-list-part-3-o1g”

Читайте ещё по теме: