Эффективный виджет поиска, который показывает предложения по мере ввода, на простом старом JavaScript, используя Fetch API для ПОЛУЧЕНИЯ контента.
Работая над Influen $ e, я хотел сделать функцию поиска надежным инструментом для людей, ищущих в Instagram влиятельного лица.
Поскольку обнаружение является важной отличительной чертой Influen $ e, я также хотел встроить простую функцию рекомендаций, ориентированную на клиентов на основе релевантности контента влиятельных лиц для их основных ценностей бренда.
В этой статье я поделюсь кодом и расскажу, как работает эта функция.
Если вы знаете, что делаете, можете перейти к коду на GitHub.
HTML
Я использую UIKit 3 для своего CSS-фреймворка, поэтому эта часть проста. Вот код:
Получение данных с помощью Fetch API
Первое, что нам нужно сделать, это получить массив объектов для заполнения предложений, верно? Итак, нам нужно сделать запрос к конечной точке API или функции без заголовка или чему-то еще.
Мы будем использовать Fetch API, потому что все, что нам нужно, это объект JSON, но если вам нужен более детальный контроль, вы можете точно так же использовать XHR.
Fetch довольно прост:
- Отправьте
GET
запрос к конечной точке API(://<server>/api/)
. .then(res => res.json())
отображает ответ как JSON..then(json => {})
- это то место, где мы можем использовать этот JSON..catch(error =>...);
вылавливает любые ошибки в нашем запросе.
Fetch не проверяет ошибки! Он возвращает ошибку только в том случае, если что-то пошло не так с фактическим запросом к серверу, например, 404 или 500. Итак, вам нужно будет написать свой собственный код обнаружения ошибок.
Если вы запустите этот код, вы получите массив объектов. В моем случае это набор объектов влияния в социальных сетях:
Кодирование пользовательского интерфейса
Теперь нам нужно превратить этот массив в красивый раскрывающийся список. Мы собираемся создать списки двух типов.
- Автоматический список целевых рекомендаций, когда пользователь нажимает на поле поиска.
- Другой будет нашим списком предложений по типу.
Для этого мы передадим наш массив новой функции с именем loadLists()
. Давайте обновим наш ответ Fetch для вызова loadLists(json):
Это передает наш массив объектов-членов новой функции с именем loadLists()
, которая выглядит следующим образом:
Здесь происходит пара вещей.
- Во-первых, мы используем оператор распространения
[...json.members]
, чтобы добраться до объектов в нашем массиве. - Затем мы создаем массив с именем
searchSuggest
и вызываем функциюfilterList()
. - Затем мы добавляем прослушиватель событий в поле ввода в нашей HTML-форме.
- И, наконец, мы загружаем трех наиболее рекомендуемых влиятельных лиц в раскрывающееся меню
presetMembers
(я к этому скоро вернусь).
Причина, по которой мы создали массив searchSuggest
, заключается в том, что мы хотим передать событие и вызов функции нашему прослушивателю событий. Это просто более чистый способ разделения наших функций.
Хорошо, давайте посмотрим на функцию filterList();
.
Вау, это самый большой кусок кода на данный момент. Давай пройдемся через это.
Во-первых, у нас есть пара аргументов key
и members
.
Итак, аргумент members
, очевидно, является нашим массивом членов, полученным в результате нашего вызова Fetch API.
Но что такое «key”
?»
Помните, когда мы создавали массив под названием searchSuggest
? Напоминаем, что добавленное нами событие
searchSuggest = ['input', function(e) {...
Мы добавляем прослушиватель событий для input
, по сути говоря, что для каждого символа, вводимого пользователем в поле формы, запускается событие input
. Возьми? Событие input
- это нажатие клавиши, которое является нашим аргументом key
.
Другими словами, каждый раз, когда пользователь вводит символ в поле поиска, запускайте функцию filterList()
.
Затем мы получаем элемент MemberList
из нашего HTML. Здесь мы сформируем наш список участников.
Хорошо, давайте взглянем на наш for loop
.
В этой строке мы преобразуем весь текст в нижний регистр, поэтому поиск будет нечувствительным к регистру:
if ((members[i].ig_handle.toLowerCase()).indexOf(key.toLowerCase()) > -1)
Затем для каждого введенного символа мы перебираем наш список участников и создаем новый узел элемента списка:
${members[i].ig_handle}
- это то, как мы идентифицируем наших членов. В моем случае я ищу их по имени пользователя в Instagram == ig_handle
. Вы должны использовать все, что вам нужно.
Затем мы получаем до пяти участников и добавляем их в наш список с помощью insertAdjacentHTML
:
И, наконец, если пользователь вводит менее двух символов - или возвращает менее двух символов - перезагрузите наш presetMembers
, скрывая наши предложения:
Сшить все вместе
Давайте получим наши элементы, используя getElementById:
Теперь мы используем шаблонные литералы для создания нашей <ul>
разметки, которую мы собираемся вставить в presetmember
div.
Вот оно. Сохраните файл и (надеюсь) все должно работать красиво!
Я надеюсь, что это было полезно для вас. Не стесняйтесь комментировать вопросы, откровения, оскорбления и т. Д.
Получите весь код на GitHub:
И посмотрите мое портфолио на сайте: www.hypermix.com