jquery autocompleter

Плагин автозаполнения jQuery

Демо

Здесь: Пример с цветами Crayola.

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

Установка

НПМ:

npm install --save jquery-autocompleter

Пряжа:

yarn add jquery-autocompleter

Добавьте плагин в свой проект

• включить jQuery:

   < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

• включите код плагина:

   <!-- Styles -->
  < link rel =" stylesheet " href =" css/jquery.autocompleter.css " />
  
  <!-- Scripts -->
  < script src =" js/jquery.autocompleter.min.js " > </ script >

• вызовите плагин:

   $ ( "input" ) . autocompleter ( {
    /* options */
  } ) ; 

Примеры

• удаленный URL

   $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
  } ) ;

• простой

   var data = [
    { value : 1 , label : "one" } ,
    { value : 2 , label : "two" } ,
    { value : 3 , label : "three" } ,
  ] ;
  
  $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : data } ) ;
  } ) ; 

Параметры

Автозаполнение имеет следующие параметры:

Имя	Тип	Описание	По умолчанию
источник	ул, объект	URL-адрес сервера или локального объекта	нулевой
asLocal	логическое значение	Анализ удаленного ответа как локального источника	ЛОЖЬ
пустой	логическое значение	Запустить, если значение пусто	истинный
предел	интервал	Количество результатов, которые будут отображаться	10
миндлина	интервал	Минимальная длина автозаполнения	0
задерживать	интервал	Несколько миллисекунд, чтобы отложить запрос	0
CustomClass	множество	Массив с пользовательскими классами для элемента автозаполнения	[]
кэш	логическое значение	Сохраните данные xhr в localStorage, чтобы избежать повторения запросов.	истинный
кешИстекает	интервал	Время жизни данных localStorage в секундах (0, чтобы отключить срок действия кэша)	86400
фокусОткрыть	логическое значение	Запустить автозаполнение, когда ввод получает фокус	истинный
EnterВыбрать	логическое значение	Позволяет выбирать с помощью клавиши ввода	истинный
намекать	логическое значение	Добавьте подсказку к вводу с первой совпадающей меткой, должны быть установлены правильные стили.	ЛОЖЬ
выберите первый	логическое значение	Если установлено значение true , первый элемент в списке автозаполнения будет выбран автоматически, игнорируйте, если включен параметр ChangeWhenSelect.	ЛОЖЬ
изменитьКогдаВыбрать	логическое значение	Позволяет изменять входное значение с помощью клавиш со стрелками в списке автозаполнения.	истинный
выделитьМатчи	логическое значение	Этот параметр определяет перенос тега <strong> для совпадений в результатах автозаполнения.	ЛОЖЬ
игнорируетсяKeyCode	множество	Массив с игнорируемыми кодами клавиш по умолчанию: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	[]
CustomLabel	ул.	Имя свойства объекта, которое будет использоваться в качестве метки.	ЛОЖЬ
CustomValue	ул.	Имя свойства объекта, которое будет использоваться в качестве значения.	ЛОЖЬ
onBeforeSend	функция	Эта функция срабатывает перед запросом ajax.	$.нуп
onBeforeShow	функция	Эта функция срабатывает, когда список готов к отображению.	$.нуп
onEmpty	функция	Если список данных пуст, активируйте эту функцию	$.нуп
onItem	функция	Эта функция срабатывает, когда каждый элемент готовится к показу.	$.нуп
onListOpen	функция	Эта функция срабатывает, когда отображается список	$.нуп
onListClose	функция	Эта функция срабатывает, когда список скрыт.	$.нуп
onBeforeLaunch	функция	Событие было вызвано до нового запроса (включая локальный кеш)	$.нуп
шаблон	ул.	Пользовательский шаблон для элементов списка. Например: <span>{{ label }} is {{ customPropertyFromSource }}</span> . Шаблон добавляется к .autocompleter-item .	ЛОЖЬ
компенсировать	ул.	Смещение исходного ответа, например: "response.items.posts" . @deprecated вместо этого используйте format	ЛОЖЬ
формат	функция	Отформатируйте полезные данные ответа для возврата исходных данных.	нулевой
объединить	функция	Возвращает объект, расширяющий данные ajax. Полезно, если вы хотите передать некоторые дополнительные параметры сервера.	$.нуп
перезвонить	функция	Выберите функцию обратного вызова значения. Аргументы: value , index , object	$.нуп

Методы

Изменить опцию после определения плагина

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

Например:

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ; 

Открыть список

 $ ( "#input" ) . autocompleter ( "open" ) ; 

Закрыть список

 $ ( "#input" ) . autocompleter ( "close" ) ; 

Уничтожить плагин

 $ ( "#input" ) . autocompleter ( "destroy" ) ; 

Очистить весь кеш

 $ . autocompleter ( "clearCache" ) ; 

Установить настройки по умолчанию

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ; 

Еще один пример

Автозаполнение для ввода имени с кешированием, подсветкой совпадений и ограничением до 5 результатов. Удаленный ответ зависит от пола:

Разметка формы

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset > 

Код

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ; 

Разметка

div (node) -> ul (list) -> li (item) .

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >