Действителен для любого фреймворка css

Этот небольшой пост покажет вам, как создать простой компонент автозаполнения, который работает с массивом значений элементов [{}, {}, ..]. Вы можете легко интегрировать его с любым фреймворком CSS, таким как bootstrap 4, и можете изменить его в соответствии со своими потребностями.

Мы собираемся использовать LitElement для создания веб-компонента. LitElement - это простая реализация, соответствующая спецификации Стандарты веб-компонентов.

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

Разъяснил это, приступим.

1. Импортируйте базовый класс LitElement и вспомогательную функцию html.

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

3. Время, в течение которого будет отображаться сообщение «Нет результатов», если нет предложений по введенному тексту.

4. Создайте класс для вашего элемента, который расширяет базовый класс LitElement
.

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

6. Получатель элемента inputEl.

7. Проверьте, существует ли элемент inputEl.

8. Верните его, если он есть.

9. В противном случае создайте переменную slotInputList с HTML-элементом dropdonw-input.

10. Если переменная slotInputList имеет содержимое раскрывающегося списка ввода, затем создает переменную inputEl с содержимым this, иначе получает HTML-элемент defaultInput и назначает его.

11. Верните переменную inputEl.

12. Когда мы вызываем компонент, мы передаем ему содержимое списка элементов в атрибуте «fulllist». Разница между атрибутами и свойствами заключается в том, что атрибуты выражаются в модели DOM, а свойства - нет.

13. Когда это происходит, мы присваиваем это переменным items.

14. Конструктор litElement, здесь мы инициализируем наши переменные.

15. Вызвать супер-метод класса LitElement.

16. Сохраните ссылку на связанные обработчики событий для отключения.

17. Список совпадений, соответствующих тому, что мы ищем.

18. Список со всеми элементами:
[{«значение»: «1», «текст»: «привет»},
{«значение»: «2», «текст»: » привет »},
{« значение »:« 3 »,« текст »:« Как дела »},
{« значение »:« 4 »,« текст »:« Меня зовут » }]

19. Список совпадений открыт?

20. Количество отображаемых элементов соответствует вводимому тексту. Список со всеми предметами

21. Вызывается после первого обновления модели DOM элемента, непосредственно перед вызовом метода «updated».

22. Привяжите события клавиатуры к нашему объекту ссылки на событие. В этом объекте мы собираемся сохранить все события клавиатуры нашего компонента автозаполнения.

23. Добавьте слушателей для предыдущих событий.

24. Вызывается после обновления и визуализации модели DOM элемента.
Мы реализуем это для выполнения некоторых задач после обновления.

25. Если у нас есть список предложений, то мы выполним шаг 26.

26. При отображении списка предложений мы добавляем класс «active», чтобы выделить первый элемент в списке предложений, если есть предложения. Ранее мы удаляли любой другой класс «active» предыдущих итераций.

27. Метод disconnectedCallback вызывается, когда компонент удаляется из DOM документа.

28. Нет событий для удаления.

29. Удалите слушателей событий.

30. Сообщает пользовательскому агенту, что если событие не обрабатывается явным образом, его действие по умолчанию не должно выполняться, как обычно. В этом случае не позволяйте движению вверх и вниз вести себя как обычно. Метод stopPropagation () интерфейса Event предотвращает дальнейшее распространение текущего события на этапах захвата и восходящей цепочки.

31. Вызывается при нажатии клавиши.

32. Выделите предыдущий элемент списка предложений.

33. Выделите следующий элемент списка предложений.

34. Когда нажата клавиша - это клавиша «Enter». В любом другом случае (случай по умолчанию), если мы передали компоненту список элементов, мы будем искать строку, набранную в этом списке, используя метод фильтра ES6. Здесь вы можете улучшить эту функцию поиска, чтобы так или иначе искать строку.

35. Ограничьте список результатов предложения.

36. Если совпадений не найдено, отобразить встроенное сообщение, указывающее на отсутствие совпадений.

37. Выделите предыдущий элемент в списке, добавив класс «active».

38. Выделите следующий элемент в списке.

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

40. Этот метод вызывается при запуске события onBlur. В этом случае мы закрываем список предложений.

41. Обработайте событие focus мыши.

42–43. Если вызывается _handleItemMouseLeave, то мы закрываем список предложений после ожидания 500 мс.

44. Показать список предложений.

45. Скрыть список предложений.

46. ​​Предлагать автозаполнение.

47. Этот метод закрывает список предложений при выборе элемента и передает событие «selected-autocomplete» всем, кто подписан.

48. Мы сообщим подписчикам выбранный текст значения.

49. Использует lit-html для визуализации шаблона элемента. Мы должны реализовать метод рендеринга для любого компонента, расширяющего базовый класс LitElement. Вот HTML-код, который мы будем рисовать на странице. Мы можем определить стили нашего компонента.

50. Показываем список совпадений и устанавливаем метод автозаполнения на действие щелчка.

51. Контроллером настраиваемых элементов в веб-документе является объект CustomElementRegistry. Этот объект позволяет нам зарегистрировать настраиваемый элемент на странице, наш компонент lit-autocomplete.

На этом снимке экрана мы видим, как работает автозаполнение. Когда мы пишем букву «h,», мы показываем все совпадения буквой «h.»

Если совпадений не найдено, отображается сообщение «нет совпадений».

Вывод

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

Демо и код созданного нами компонента.

Спасибо, что прочитали меня! Заботиться.