saytum-autocomplete v2.3.0

Saytum autocomplete

Using

Install the library

$ yarn add saytum-autocomplete

Add a text (or search) field with a class or id

<form id="form">
  <input type="text" id="element">
</form>

Example

Import the library and create an instance with settings

import SaytumAutocomplete from 'saytum-autocomplete'; 

new SaytumAutocomplete({
  elInput: '#element',
  customResult: '',
  customClassResult: '',
  minLength: 1,
  classResult: 'autocomplete__result',
  classNoResult: 'autocomplete__no-result',
  classResultItem: 'autocomplete__item',
  classResultRootItem: 'autocomplete__root',
  classItemName: 'autocomplete__name',
  classItemPlaceholder: 'autocomplete__placeholder',
  classHistoryClear: 'autocomplete__history-clear',
  classActive: 'active',
  customEnterEvent: (event, activeItemIndex, data) => {
    console.log('customEnterEvent', event, activeItemIndex, data);
  },
  customClickEvent: (event, activeItemIndex, data) => {
    console.log('customClickEvent', event, activeItemIndex, data);
  },
  customDataFunction: (data) => {
    console.log('customDataFunction', data);
  },
  customKeywordName: 'keyword',
  noResultsText: '',
  requestType: 'POST',
  params: {},
  ajaxDelay: 300,
  history: true,
  historyTitle: 'History user',
  maxLengthHistory: 6,
  submitButtonActive: false,
  visibleProperties: ['name', 'address'],
  groupBy: 'type',
  url: 'https://site.ru/api'
});

Add styles - autocomplete.sass or autocomplete.css.