Вы, вероятно, набрали что-то в строке поиска Google и видите предложения, которые появляются до того, как закончите ввод?

Да, это обычное дело в наши дни, но представьте, что у вас нет такой функциональности? Разве не будет досадно закончить ввод ключевого слова, которое, как вы знаете, вы будете использовать несколько раз.

В этой статье мы поговорим о том, как реализовать функцию автозаполнения в react.

Чтобы понять, как это реализовать, запомните следующие ключевые компоненты:

  • понять условие, которое скрывает / показывает автозаполнение
  • понимать, как прокручивать элементы автозаполнения, когда пользователь нажимает вверх и вниз для поиска элемента автозаполнения, который они ищут
  • необходимо отслеживать несколько переменных: одна из них - это индекс предложения автозаполнения, переменная, определяющая, показывать предложение или нет, текстовое поле ввода и отфильтрованные варианты автозаполнения в зависимости от того, что вы вводите для своего текстового поля.

Чтобы понять, как это выглядит, давайте посмотрим, как будет выглядеть автозаполнение:

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

Звучит просто, правда?

Давайте посмотрим на реализацию:

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

Сверху у нас есть filterSuggestions, который вычисляется как отфильтрованный массив, когда пользователь начинает вводить слова в текстовое поле. В функции рендеринга мы генерируем текстовое поле ввода, которое обрабатывается, когда пользователь вводит ключевые слова через onChange.

Он также имеет функции для обработки нажатия клавиш при вводе, вверх и вниз, когда пользователь прокручивает элементы автозаполнения с помощью onKeyDown. Кроме того, мы также предоставляем предложения только тогда, когда пользователь вводит что-то во входные данные и когда хотя бы одна опция автозаполнения включает введенные входные данные.

Мы только что рассмотрели, что в целом происходит с различными функциями автозаполнения. Но что на самом деле происходит при срабатывании функций? Давайте подробнее рассмотрим this.setSearchBarValue:

Здесь мы берем e.currentTarget.value, то есть любое значение, введенное в ‹input›. Если входов нет, мы устанавливаем itemRefs.current в пустой массив. Позже я расскажу, для чего это используется.

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

Ничего особенного, правда? Давайте посмотрим, что происходит, когда пользователь перемещается вверх и вниз в поисках другого варианта автозаполнения, чтобы выбрать:

Когда пользователь выбирает любую клавишу на клавиатуре, эта функция запускается. Первоначально для параметра offerRowIdx установлено значение 0. Здесь, если пользователь нажимает клавишу ввода, значение кода которой равно 13, первая опция автозаполнения выбирается в виде текста.

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

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

Обратите внимание, что мы снова ссылаемся на itemRefs. Что означает this.itemRefs.current [scrollIndex] .scrollIntoView ()?

Прежде чем понимать, что означает это утверждение, давайте разберемся, что такое ref в React.

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

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

Зачем нам нужны ссылки, если мы можем управлять поведением автозаполнения только с помощью функций реагирования и прослушивания нажатия клавиш?

Допустим, мы продолжаем прокручивать список вниз, как показано на изображении ниже:

В нашем CSS мы зафиксировали определенное значение высоты, и у нас есть наш overflow-Y, установленный на auto, что позволяет отображать полосу прокрутки. Но в конечном итоге происходит то, что когда мы нажимаем клавишу «вниз», параметры автозаполнения фактически не появляются.

На самом деле варианты автозаполнения, которые находятся под теми, которые мы видим, будут выбраны, но не будут отображаться. Какие? Почему?

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

Вводит ссылки на реакцию (или в этом случае мы вызываем itemRefs).

Чтобы понять, как мы храним ссылки на варианты автозаполнения, давайте посмотрим, как работает renderSuggestion.

Когда мы отображаем предложения автозаполнения, мы создаем отдельные разделы автозаполнения, где мы позволяем пользователю выбирать. Внутри всех генерируемых ‹li› s мы сохраняем наши ссылки локально в itemRefs. Эти ссылки представляют собой узлы html dom, к которым мы можем получить доступ и прокручивать их, когда пользователь прокручивает вверх и вниз.

Теперь давайте взглянем на CSS-часть этого:

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

Мы также устанавливаем правила для дочернего текста / контейнеров самого контейнера автозаполнения с цветами наведения и свойствами заполнения.

Давайте посмотрим, как создать компонент автозаполнения:

Вот и все! Вы только что научились создавать автозаполнение с нуля.