Skip to main content

Автозаповнення

Techno4 постачається з оптимізованим для мобільних пристроїв та сенсорним компонентом автозаповнення. Автозаповнення можна використовувати в автономному режимі або як спадне меню.

Методи застосунку автозаповнення

Автозаповнення можна створити та ініціалізувати лише за допомогою JavaScript. Нам потрібно використовувати метод пов’язаного застосунку:
app.autocomplete.create(parameters)- створити екземпляр автозаповнення

parameters - object. Об'єкт з параметрами автозаповнення

Метод повертає створений екземпляр автозаповнення

app.autocomplete.destroy(el)- знищити екземпляр автозаповнення

el - HTMLElement or string (with CSS Selector) or object примірник Автозаповнення для знищення.

app.autocomplete.get(el)- отримати екземпляр автозаповнення за елементом HTML

el - HTMLElement or string (with CSS Selector) Елемент автозаповнення.

Метод повертає екземпляр автозаповнення

app.autocomplete.open(el)- відкрити автозаповнення

el - HTMLElement or string (with CSS Selector) Елемент автозаповнення для відкриття.

Метод повертає екземпляр автозаповнення

app.autocomplete.close(el)- закриває автозаповнення

el - HTMLElement or string (with CSS Selector). Елемент автозаповнення для закриття.

Метод повертає екземпляр автозаповнення

Наприклад:
var autocomplete = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown',
  openIn: 'dropdown',
  source: function (query, render) {
    ...
  }
});

Параметри автозаповнення

Давайте подивимося на список усіх доступних параметрів:
ПараметрЗа замовчуваннямОписТип
openIn
page
Визначає, як відкривати автозаповнення, може бути сторінкою page, спливаючим вікном popup (для автономного режиму) або розкривним меню dropdown
string
source
Функція, яка приймає пошуковий запит query і функцію візуалізації render, де вам потрібно передати масив із відповідними елементами
function (query, render)
limit
Обмеження максимальної кількості елементів, що відображаються в автозавершенні на запит
number
preloader
false
Установіть значення true, щоб увімкнути Preloader для автозаповнення макета
boolean
preloaderColor
Колір попереднього завантажувача, один із кольорів за замовчуванням
string
value
Масив із вибраними значеннями за замовчуванням
array
valueProperty
id
Ім’я ключа відповідного об’єкта елемента, який представляє значення елемента
string
textProperty
text
Ім’я ключа відповідного об’єкта елемента, який представляє відображуване значення елемента, яке використовується як заголовок відображених параметрів
string

Параметри автономного автозаповнення

ПараметрЗа замовчуваннямОписТип
requestSourceOnOpen
false
Якщо ввімкнути, він запитуватиме передачу до функції джерела source під час відкриття автозавершення
boolean
openerEl
Рядок із селектором CSS або HTMLElement посилання, яке відкриватиме окрему сторінку автозаповнення або спливаюче вікно після натискання
string

HTMLElement

popupCloseLinkText
Close
Текст за замовчуванням для кнопки "Закрити", коли її відкрито як спливаюче вікно popup
string
pageBackLinkText
Back
Текст за замовчуванням для посилання "Назад" під час відкриття як сторінки
string
pageTitle
Автозаповнення назви сторінки. Якщо нічого не вказано та передано openerEl — це елемент перегляду списку, тоді використовуватиметься текстове значення елемента item-title
string
popupPush
false
Вмикає спливаюче вікно автозавершення, щоб відкривати перегляди
boolean
popupSwipeToClose
undefined
Дозволяє закривати спливаюче вікно автозаповнення за допомогою пальця. Якщо не вказано, він успадковує параметр Popup swipeToClose застосунку
boolean
sheetPush
false
Вмикає аркуш автозаповнення, щоб відкривати перегляди позаду
boolean
sheetSwipeToClose
undefined
Дозволяє закривати аркуш автозаповнення за допомогою пальця. Якщо не вказано, він успадковує параметр Sheet swipeToClose застосунку
boolean
searchbarPlaceholder
Search...
Текст заповнювача панелі пошуку
string
searchbarDisableText
Cancel
Текст кнопки "Скасувати" на панелі пошуку
string
searchbarSpellcheck
false
Встановлює значення атрибута перевірки орфографії spellcheck в елементі введення панелі пошуку Searchbar
boolean
notFoundText
Nothing found
Текст, який відображається, якщо збігів не знайдено
string
multiple
false
Установіть значення true, щоб дозволити багаторазовий вибір
boolean
closeOnSelect
false
Установіть значення true, і автозаповнення буде закрито, коли користувач вибере значення. Недоступно, якщо ввімкнено кілька multiple
boolean
autoFocus
false
Установіть значення true, щоб відкрити поле пошуку з автофокусом під час автозаповнення
boolean
animate
true
Установіть значення false, щоб відкрити окреме автозаповнення без анімації
boolean
navbarColorTheme
Кольорова тема панелі навігації. Одна з колірних тем за замовчуванням
string
formColorTheme
Кольорова тема форми (прапорці або радіо). Одна з колірних тем за замовчуванням
string
routableModals
false
Буде додано відкритий режим автозаповнення (при openIn: ‘popup’) до історії маршрутизатора, що дає можливість закрити автозаповнення, повернувшись до історії маршрутизатора та встановити поточний маршрут до режиму автозаповнення
boolean
url
select/
Окрема URL-адреса автозаповнення, яка буде встановлена як поточний маршрут
string
view
Посилання на ініціалізований екземпляр View, якщо ви хочете використовувати автономне автозаповнення. За замовчуванням, якщо не вказано, його буде відкрито в головному вікні.
object

Параметри автозаповнення, що розкриваються

ПараметрЗа замовчуваннямОписТип
inputEl
Рядок із селектором CSS або HTMLElement пов’язаного введення тексту
string

HTMLElement

inputEvents
input
Дозволяє налаштувати події введення, які використовуються для обробки дій автозавершення та запиту джерела. Можна змінити, наприклад, change keyup compositioned, якщо ви використовуєте клавіатуру з китайськими ієрогліфами
string
highlightMatches
true
Виділіть збіги в результатах автозаповнення
boolean
typeahead
false
Вмикає введення наперед, попередньо заповнює введене значення першим відповідним елементом
boolean
dropdownPlaceholderText
Укажіть текст заповнювача спадного меню
String
updateInputValueOnSelect
true
Якщо значення true, значення відповідного введення також буде оновлено
boolean
expandInput
false
Якщо значення true, тоді введення, яке використовується як елемент введення в режимі списку, буде розгорнуто на весь екран під час видимості спадного меню.
boolean
dropdownContainerEl
За замовчуванням спадне меню буде додано до батьківського елемента вмісту сторінки. Ви можете вказати тут інший елемент, куди додати елемент спадного меню
string

HTMLElement

Функції візуалізації

ПараметрОписТип
renderDropdown
Функція для візуалізації спадного списку автозаповнення має повертати рядок HTML спадного списку
function(items)
renderPage
Функція для візуалізації сторінки автозаповнення має повертати рядок HTML сторінки
function(items)
renderPopup
Функція для відтворення спливаючого вікна автозавершення має повертати рядок HTML спливаючого вікна
function(items)
renderItem
Функція для відтворення окремого автозаповнення має повертати рядок HTML елемента
function(item, index)
renderSearchbar
Функція для візуалізації панелі пошуку має повертати рядок HTML панелі пошуку
function
renderNavbar
Функція для відтворення навігаційної панелі має повертати HTML-рядок навігаційної панелі
function

Події

ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
var autocomplete = app.autocomplete.create({
  ...
  on: {
    opened: function () {
      console.log('Autocomplete opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах застосунку у властивості автозаповнення, щоб установити значення за замовчуванням для всіх автозаповнень. Наприклад:
var app = new Techno4({
  autocomplete: {
    openIn: 'popup',
    animate: false,
  }
});

Методи та властивості автозаповнення

Після ініціалізації Autocomplete ми маємо його ініціалізований екземпляр у змінній (наприклад, змінну autocomplete у прикладі вище) з корисними методами та властивостями:

Властивості

Властивість Опис
autocomplete.params
Об'єкт із переданими параметрами ініціалізації
autocomplete.value
Масив із вибраними елементами
autocomplete.opened
true якщо автозаповнення наразі відкрито
autocomplete.openerEl
Елемент HTML елемента відкриття автозавершення (якщо передано під час ініціалізації)
autocomplete.$openerEl
Екземпляр Dom7 елемента відкриття автозаповнення (якщо передано під час ініціалізації)
autocomplete.inputEl
HTML-елемент автозавершення (якщо передано під час ініціалізації)
autocomplete.$inputEl
Екземпляр Dom7 введення автозавершення (якщо передано під час ініціалізації)
autocomplete.$dropdownEl
Випадаюче меню автозаповнення Dom7
autocomplete.url
URL-адреса автозаповнення (передана в параметрі url)
autocomplete.view
Перегляд автозаповнення (переданий у параметрі view) або знайдений батьківський перегляд
autocomplete.el
Елемент HTML контейнера автозавершення: елемент спадного меню, елемент спливаючого вікна або елемент сторінки. Доступно, коли відкрито автозаповнення
autocomplete.$el
Екземпляр контейнера автозаповнення Dom7: спадний елемент, спливаюче вікно або сторінка. Доступно, коли відкрито автозаповнення
autocomplete.searchbar
Екземпляр панелі пошуку сторінки автозаповнення

Методи

МетодОпис
autocomplete.open()
Відкрити автозаповнення (спадне меню Dropdown, сторінка Page або спливаюче вікно Popup )
autocomplete.close()
Закрити автозаповнення
autocomplete.preloaderShow()
Показати програму попереднього завантаження автозаповнення
autocomplete.preloaderHide()
Сховати програму попереднього завантаження автозаповнення
autocomplete.destroy()
Знищити екземпляр автозавершення та видалити всі події
autocomplete.on(event, handler)
Додати обробник подій
autocomplete.once(event, handler)
Додати обробник подій, який буде видалено після запуску
autocomplete.off(event, handler)
Видалити обробник подій
autocomplete.off(event)
Видалити всі обробники для вказаної події
autocomplete.emit(event, ...args)
Запустити подію на екземплярі

Події автозаповнення

Екземпляр автозавершення генерує події як на самому екземплярі, так і на екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом автозаповнення.
ПодіяАргументОписОб'єкт
change
autocomplete,

value

Подія буде ініційована, коли змінено значення автозаповнення. Повернене значення – це масив із вибраними елементами
autocomplete
autocompleteChange
autocomplete,

value

Подія буде ініційована, коли змінено значення автозаповнення. Повернене значення – це масив із вибраними елементами
app
open
autocomplete
Подію буде запущено, коли автозавершення запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр автозаповнення
autocomplete
autocompleteOpen
autocomplete
Подію буде запущено, коли автозавершення запустить початкову анімацію. В якості аргументу обробник події отримує екземпляр автозаповнення
app
opened
autocomplete
Подію буде запущено після того, як автозаповнення завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр автозаповнення
autocomplete
autocompleteOpened
autocomplete
Подію буде запущено після того, як автозаповнення завершить свою початкову анімацію. В якості аргументу обробник події отримує екземпляр автозаповнення
app
close
autocomplete
Подію буде запущено після того, як автозавершення завершить анімацію закриття. В якості аргументу обробник події отримує екземпляр автозаповнення
autocomplete
autocompleteClosed
autocomplete
Подію буде запущено після того, як автозавершення завершить анімацію закриття. В якості аргументу обробник події отримує екземпляр автозаповнення
app
beforeDestroy
autocomplete
Подію буде запущено безпосередньо перед знищенням екземпляра автозаповнення. В якості аргументу обробник події отримує екземпляр автозаповнення
autocomplete
autocompleteBeforeDestroy
autocomplete
Подію буде запущено безпосередньо перед знищенням екземпляра автозаповнення. В якості аргументу обробник події отримує екземпляр автозаповнення
app

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-autocomplete-dropdown-placeholder-color: #a9a9a9;
  --t4-autocomplete-dropdown-preloader-size: 20px;
  --t4-autocomplete-dropdown-font-size: var(--t4-list-font-size);
  /*
  --t4-autocomplete-dropdown-selected-bg-color: rgba(var(--t4-theme-color-rgb), 0.2);
  */
  --t4-autocomplete-dropdown-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-autocomplete-dropdown-bg-color: #1c1c1d;
}
.ios {
  --t4-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  --t4-autocomplete-dropdown-text-matching-font-weight: 600;
  --t4-autocomplete-dropdown-text-color: #000;
  --t4-autocomplete-dropdown-text-matching-color: #000;
}
.ios .dark,
.ios.dark {
  --t4-autocomplete-dropdown-text-color: #fff;
  --t4-autocomplete-dropdown-text-matching-color: #fff;
}
.md {
  --t4-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  --t4-autocomplete-dropdown-text-matching-font-weight: 400;
  --t4-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
  --t4-autocomplete-dropdown-text-matching-color: #212121;
}
.md .dark,
.md.dark {
  --t4-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
  --t4-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
}
.aurora {
  --t4-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  --t4-autocomplete-dropdown-text-matching-font-weight: 700;
  --t4-autocomplete-dropdown-text-color: #000;
  --t4-autocomplete-dropdown-text-matching-color: #000;
}
.aurora .dark,
.aurora.dark {
  --t4-autocomplete-dropdown-text-color: #fff;
  --t4-autocomplete-dropdown-text-matching-color: #fff;
}

Приклади

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Autocomplete</div>
        <div class="subnavbar">
          <form class="searchbar" id="searchbar-autocomplete">
            <div class="searchbar-inner">
              <div class="searchbar-input-wrap">
                <input type="search" placeholder="Search" />
                <i class="searchbar-icon"></i>
                <span class="input-clear-button"></span>
              </div>
              <span class="searchbar-disable-button">Cancel</span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Dropdown Autocomplete</div>
      <div class="list no-hairlines-md">
        <div class="block-header">Simple Dropdown Autocomplete</div>
        <ul>
          <li class="item-content item-input inline-label">
            <div class="item-inner">
              <div class="item-title item-label">Fruit</div>
              <div class="item-input-wrap">
                <input id="autocomplete-dropdown" type="text" placeholder="Fruit" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list no-hairlines-md">
        <div class="block-header">Dropdown With Input Expand</div>
        <ul>
          <li class="item-content item-input inline-label">
            <div class="item-inner">
              <div class="item-title item-label">Fruit</div>
              <div class="item-input-wrap">
                <input id="autocomplete-dropdown-expand" type="text" placeholder="Fruit" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list no-hairlines-md">
        <div class="block-header">Dropdown With All Values</div>
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Fruit</div>
              <div class="item-input-wrap">
                <input id="autocomplete-dropdown-all" type="text" placeholder="Fruit" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list no-hairlines-md">
        <div class="block-header">Dropdown With Placeholder</div>
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Fruit</div>
              <div class="item-input-wrap">
                <input id="autocomplete-dropdown-placeholder" type="text" placeholder="Fruit" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list no-hairlines-md">
        <div class="block-header">Dropdown With Typeahead</div>
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Fruit</div>
              <div class="item-input-wrap">
                <input id="autocomplete-dropdown-typeahead" type="text" placeholder="Fruit" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list no-hairlines-md">
        <div class="block-header">Dropdown With Ajax-Data</div>
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Language</div>
              <div class="item-input-wrap">
                <input id="autocomplete-dropdown-ajax" type="text" placeholder="Language" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list no-hairlines-md">
        <div class="block-header">Dropdown With Ajax-Data + Typeahead</div>
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Language</div>
              <div class="item-input-wrap">
                <input id="autocomplete-dropdown-ajax-typeahead" type="text" placeholder="Language" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Standalone Autocomplete</div>
      <div class="list">
        <div class="block-header">Simple Standalone Autocomplete</div>
        <ul>
          <li>
            <a class="item-link item-content" href="#" id="autocomplete-standalone">
              <input type="hidden" />
              <div class="item-inner">
                <div class="item-title">Favorite Fruite</div>
                <div class="item-after"></div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list">
        <div class="block-header">Popup Autocomplete</div>
        <ul>
          <li>
            <a class="item-link item-content" href="#" id="autocomplete-standalone-popup">
              <input type="hidden" />
              <div class="item-inner">
                <div class="item-title">Favorite Fruite</div>
                <div class="item-after"></div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list">
        <div class="block-header">Multiple Values</div>
        <ul>
          <li>
            <a class="item-link item-content" href="#" id="autocomplete-standalone-multiple">
              <input type="hidden" />
              <div class="item-inner">
                <div class="item-title">Favorite Fruite</div>
                <div class="item-after"></div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list">
        <div class="block-header">With Ajax-Data</div>
        <ul>
          <li>
            <a class="item-link item-content" href="#" id="autocomplete-standalone-ajax">
              <input type="hidden" />
              <div class="item-inner">
                <div class="item-title">Language</div>
                <div class="item-after"></div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div></template>
<script>
  export default (props, { $, $t4, $on }) => {
    const fruits = 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' ');

    let searchbar;
    let autocompleteDropdownSimple;
    let autocompleteDropdownExpand;
    let autocompleteDropdownAll;
    let autocompleteDropdownPlaceholder;
    let autocompleteDropdownTypeahead;
    let autocompleteDropdownAjax;
    let autocompleteDropdownAjaxTypeahead;
    let autocompleteStandaloneSimple;
    let autocompleteStandalonePopup;
    let autocompleteStandaloneMultiple;
    let autocompleteStandaloneAjax;

    $on('pageInit', () => {
      autocompleteDropdownSimple = $t4.autocomplete.create({
        inputEl: '#autocomplete-dropdown',
        openIn: 'dropdown',
        source: function (query, render) {
          console.log(query);
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });

      // Dropdown with input expand
      autocompleteDropdownExpand = $t4.autocomplete.create({
        inputEl: '#autocomplete-dropdown-expand',
        openIn: 'dropdown',
        expandInput: true, // expand input
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });

      // Dropdown with all values
      autocompleteDropdownAll = $t4.autocomplete.create({
        inputEl: '#autocomplete-dropdown-all',
        openIn: 'dropdown',
        source: function (query, render) {
          var results = [];
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });

      // Dropdown with placeholder
      autocompleteDropdownPlaceholder = $t4.autocomplete.create({
        inputEl: '#autocomplete-dropdown-placeholder',
        openIn: 'dropdown',
        dropdownPlaceholderText: 'Try to type "Apple"',
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });

      // Dropdown with typeahead
      autocompleteDropdownTypeahead = $t4.autocomplete.create({
        inputEl: '#autocomplete-dropdown-typeahead',
        openIn: 'dropdown',
        dropdownPlaceholderText: 'Try to type "Pineapple"',
        typeahead: true,
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });

      // Dropdown with ajax data
      autocompleteDropdownAjax = $t4.autocomplete.create({
        inputEl: '#autocomplete-dropdown-ajax',
        openIn: 'dropdown',
        preloader: true, //enable preloader
        /* If we set valueProperty to "id" then input value on select will be set according to this property */
        valueProperty: 'name', //object's "value" property name
        textProperty: 'name', //object's "text" property name
        limit: 20, //limit to 20 results
        dropdownPlaceholderText: 'Try "JavaScript"',
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Show Preloader
          autocomplete.preloaderShow();

          // Do Ajax request to Autocomplete data
          $t4.request({
            url: './autocomplete-languages.json',
            method: 'GET',
            dataType: 'json',
            //send "query" to server. Useful in case you generate response dynamically
            data: {
              query: query,
            },
            success: function (data) {
              // Find matched items
              for (var i = 0; i < data.length; i++) {
                if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
              }
              // Hide Preoloader
              autocomplete.preloaderHide();
              // Render items by passing array with result items
              render(results);
            }
          });
        }
      });

      // Dropdown with ajax data
      autocompleteDropdownAjaxTypeahead = $t4.autocomplete.create({
        inputEl: '#autocomplete-dropdown-ajax-typeahead',
        openIn: 'dropdown',
        preloader: true, //enable preloader
        /* If we set valueProperty to "id" then input value on select will be set according to this property */
        valueProperty: 'name', //object's "value" property name
        textProperty: 'name', //object's "text" property name
        limit: 20, //limit to 20 results
        typeahead: true,
        dropdownPlaceholderText: 'Try "JavaScript"',
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Show Preloader
          autocomplete.preloaderShow();

          // Do Ajax request to Autocomplete data
          $t4.request({
            url: './autocomplete-languages.json',
            method: 'GET',
            dataType: 'json',
            //send "query" to server. Useful in case you generate response dynamically
            data: {
              query: query,
            },
            success: function (data) {
              // Find matched items
              for (var i = 0; i < data.length; i++) {
                if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
              }
              // Hide Preoloader
              autocomplete.preloaderHide();
              // Render items by passing array with result items
              render(results);
            }
          });
        }
      });

      // Simple Standalone
      autocompleteStandaloneSimple = $t4.autocomplete.create({
        openIn: 'page', //open in page
        openerEl: '#autocomplete-standalone', //link that opens autocomplete
        closeOnSelect: true, //go back after we select something
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        },
        on: {
          change: function (value) {
            console.log(value);
            // Add item text value to item-after
            $('#autocomplete-standalone').find('.item-after').text(value[0]);
            // Add item value to input value
            $('#autocomplete-standalone').find('input').val(value[0]);
          },
        },
      });

      // Standalone Popup
      autocompleteStandalonePopup = $t4.autocomplete.create({
        openIn: 'popup', //open in page
        openerEl: '#autocomplete-standalone-popup', //link that opens autocomplete
        closeOnSelect: true, //go back after we select something
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        },
        on: {
          change: function (value) {
            // Add item text value to item-after
            $('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
            // Add item value to input value
            $('#autocomplete-standalone-popup').find('input').val(value[0]);
          },
        },
      });

      // Multiple Standalone
      autocompleteStandaloneMultiple = $t4.autocomplete.create({
        openIn: 'page', //open in page
        openerEl: '#autocomplete-standalone-multiple', //link that opens autocomplete
        multiple: true, //allow multiple values
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        },
        on: {
          change: function (value) {
            // Add item text value to item-after
            $('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
            // Add item value to input value
            $('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
          }
        }
      });

      // Standalone With Ajax
      autocompleteStandaloneAjax = $t4.autocomplete.create({
        openIn: 'page', //open in page
        openerEl: '#autocomplete-standalone-ajax', //link that opens autocomplete
        multiple: true, //allow multiple values
        valueProperty: 'id', //object's "value" property name
        textProperty: 'name', //object's "text" property name
        limit: 50,
        preloader: true, //enable preloader
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Show Preloader
          autocomplete.preloaderShow();
          // Do Ajax request to Autocomplete data
          $t4.request({
            url: './autocomplete-languages.json',
            method: 'GET',
            dataType: 'json',
            //send "query" to server. Useful in case you generate response dynamically
            data: {
              query: query
            },
            success: function (data) {
              // Find matched items
              for (var i = 0; i < data.length; i++) {
                if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
              }
              // Hide Preoloader
              autocomplete.preloaderHide();
              // Render items by passing array with result items
              render(results);
            }
          });
        },
        on: {
          change: function (value) {
            var itemText = [],
              inputValue = [];
            for (var i = 0; i < value.length; i++) {
              itemText.push(value[i].name);
              inputValue.push(value[i].id);
            }
            // Add item text value to item-after
            $('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
            // Add item value to input value
            $('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
          },
        },
      });

      // Searchbar Autocomplete
      autocompleteSearchbar = $t4.autocomplete.create({
        openIn: 'dropdown',
        inputEl: '#searchbar-autocomplete input[type="search"]',
        dropdownPlaceholderText: 'Type "Apple"',
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      })

      searchbar = $t4.searchbar.create({
        el: '#searchbar-autocomplete',
        customSearch: true,
        on: {
          search: function (sb, query) {
            console.log(query);
          }
        }
      })
    })

    return $render;
  }
</script>