Эффективный виджет поиска, который показывает предложения по мере ввода, на простом старом 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. Итак, вам нужно будет написать свой собственный код обнаружения ошибок.

Если вы запустите этот код, вы получите массив объектов. В моем случае это набор объектов влияния в социальных сетях:

Кодирование пользовательского интерфейса

Теперь нам нужно превратить этот массив в красивый раскрывающийся список. Мы собираемся создать списки двух типов.

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

Для этого мы передадим наш массив новой функции с именем 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> разметки, которую мы собираемся вставить в presetmemberdiv.

Вот оно. Сохраните файл и (надеюсь) все должно работать красиво!

Я надеюсь, что это было полезно для вас. Не стесняйтесь комментировать вопросы, откровения, оскорбления и т. Д.

Получите весь код на GitHub:



MichaelLisboa / Suggest-search-vanillaJS
Предлагать при вводе запроса в JavaScript и UIKit 3 - MichaelLisboa / offer-search-vanillaJS github.com



И посмотрите мое портфолио на сайте: www.hypermix.com