Загрузка autocomplete - Загрузка исходного кода autocomplete

autocomplete

Другой исходный код

v1.17.7

Скачать

Библиотека JavaScript, которая позволяет быстро создавать возможности автозаполнения.

Все, что вам нужно для начала, это:

Контейнер, в который можно внедрить опыт
Данные для заполнения автозаполнения
Любое решение Virtual DOM (JavaScript, Preact, React, Vue и т. д.)

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

Настроив только эти два обязательных параметра ( container и getSources ), вы получите интерактивный опыт автозаполнения. Библиотека создает входные данные и предоставляет атрибуты интерактивности и доступности, но вы полностью контролируете элементы DOM для вывода .

Скриншот

Документация • API • Игровая площадка

Установка

Рекомендуемый способ начать — использовать пакет autocomplete-js . Он включает в себя все необходимое для рендеринга автозаполнения JavaScript.

В противном случае вы можете установить пакет autocomplete-core , если хотите создать средство визуализации с нуля.

Все пакеты автозаполнения доступны в реестре npm.

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

Если вы не используете менеджер пакетов, вы можете использовать элемент HTML- script :

 < script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
  const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script >

Использование

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

 < div id = "autocomplete" > < / div >

Затем вставьте в него свое автозаполнение, вызвав функцию autocomplete и предоставив container . Это может быть CSS-селектор или элемент.

Обязательно укажите контейнер (например, div ), а не input . Автозаполнение создает для вас полностью доступное окно поиска.

 import { autocomplete } from '@algolia/autocomplete-js' ;

autocomplete ( {
  container : '#autocomplete' ,
  // ...
} ) ;

Продолжайте читать наше руководство по началу работы .

Документация

В документации предлагается несколько способов узнать о библиотеке автозаполнения:

Прочтите « Основные понятия», чтобы узнать больше об основных принципах, таких как «Источники» и «Состояние» .
Следуйте руководствам , чтобы понять, как создавать общие шаблоны UX.
Полный список параметров и опций см. в справочнике по API.
Попробуйте Playground , где вы сможете создать базовую реализацию и поиграться.

Более подробную информацию вы можете найти в документации.

Поддерживать

Обсуждения на GitHub

Пакеты

Упаковка	Описание	Документация
`autocomplete-js`	Пакет JavaScript для автозаполнения	Документация
`autocomplete-core`	Базовые примитивы JavaScript для создания возможностей автозаполнения	Документация
`autocomplete-plugin-recent-searches`	Плагин для добавления недавних поисков в автозаполнение.	Документация
`autocomplete-plugin-query-suggestions`	Плагин для добавления предложений запросов в автозаполнение.	Документация
`autocomplete-plugin-algolia-insights`	Плагин для добавления Algolia Insights в автозаполнение	Документация
`autocomplete-plugin-redirect-url`	Плагин для включения URL-адресов перенаправления	Документация
`autocomplete-plugin-tags`	Плагин для управления и отображения списка тегов в автозаполнении.	Документация
`autocomplete-preset-algolia`	Предустановки для использования функций Algolia с автозаполнением	Документация
`autocomplete-theme-classic`	Классическая тема для автозаполнения	Документация