Вот руководство о том, как создать поле ввода автозаполнения названия компании, используя:
- Твиттеровский typeaheads.js
- Бесплатный API автозаполнения от Companydata.co
API
О API автозаполнения Companydata.co здесь находится документация. Мы вызываем его с входной строкой в качестве параметра. Он возвращает 10 элементов, которые мы можем использовать для отображения предложений. Каждый элемент имеет следующие поля:
- уникальный идентификатор
- красивое и мягкое имя
- юридическое название
- город
- страна
Вы можете легко попробовать это с помощью cURL в терминале:
curl "https://www.companydata.co/api/v1/companies/autocomplete?q=mollat"
Он возвращает следующий JSON:
Собираем вещи вместе
Во фронтенде вам понадобятся две библиотеки JavaScript:
- Typeahead.js (можно использовать связку bloodhound.js + typeahead.jquery.js)
- Handlebars.js для настройки предложений (необязательно)
Если вы используете Ruby on Rails, вы можете предпочесть использовать драгоценные камни. Добавьте это в свой Gemfile:
gem "twitter-typeahead-rails" gem "handlebars_assets"
И запустить bundle install. Измените свой application.js, чтобы добавить:
//= require twitter/typeahead //= require handlebars
Теперь вы готовы создать поле ввода, подобное этому:
<input type="text" placeholder="Company name" id="js-search-autocomplete">
Инициализируйте поле автозаполнения следующим JavaScript:
Часть «шаблоны» предназначена для настройки способа отображения предложения. Вы можете удалить его, если вам не нужна настройка или вы не хотите интегрировать Handlebars.js.
Теперь это работает, но нам нужно добавить немного CSS, чтобы стилизовать его:
Готово!
Вот статья, которая мне помогла и является источником приведенного выше CSS.
Если вам нравится API автозаполнения Companydata.co, вам понравится API обогащения Companydata.co. Проверь!
Любая обратная связь приветствуется, не стесняйтесь комментировать или связаться со мной.
