vue2 autocomplete

Vue 2 автозаполнение

Компонент автозаполнения для Vue 2. Он основан на vue-autocomplete. ЖИВАЯ ДЕМО ЗДЕСЬ!

Установить

Вы можете импортировать vue2-autocomplete.vue в файл компонента vue следующим образом и обработать его с помощью препроцессора.

Вы можете установить его через NPM

npm install vue2-autocomplete-js

Или просто поставьте его после Vue JS~

 < script src =" https://vuejs.org/js/vue.min.js " > </ script >
< script src =" ./dist/vue2-autocomplete.js " > </ script >
< script >
  // Don't Forget to register it
  new Vue ( {
    components : {
      autocomplete : Vue2Autocomplete
    }
  } ) ;
</ script > 

Импортировать стиль

Не забудьте импортировать Vue 2 CSS. Вы можете связать его через html

 < link rel =" stylesheet " href =" vue2-autocomplete-js/dist/style/vue2-autocomplete.css " >

Или вы можете импортировать его с помощью commonJS.

 require ( 'vue2-autocomplete-js/dist/style/vue2-autocomplete.css' )

Его стиль очень настраиваемый. Вы можете поместить поверх него любой CSS. И вы можете добавить собственный класс через его опору.

Модуль импорта

 import Autocomplete from 'vue2-autocomplete-js'
// Or
var Autocomplete = require ( 'vue2-autocomplete-js' ) ; 

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

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :on-select =" getData " >
  </ autocomplete >

</ template >


< script >

  import Autocomplete from 'vue2-autocomplete-js' ;

  export default {

    components : { Autocomplete } ,

    methods : {
      getData ( obj ) {
        console . log ( obj ) ;
      }
    }
  } ;

</ script >

Доступный реквизит

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :onSelect =" getData "
    :customParams =" { token: 'dev' } "
    :customHeaders =" { Authorization: 'bearer abc123' } "


    :required =" true "
    id =" custom id "
    className =" custom class name "
    :classes =" { wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' } "
    placeholder =" placeholder "
    :initValue =" initial value "


    :options =" [] "
    :min =" 3 "
    :debounce =" 2000 "
    :filterByAnchor =" true "
    :encodeParams =" true "

    :onShouldGetData =" getData "
    :onInput =" callbackEvent "
    :onShow =" callbackEvent "
    :onBlur =" callbackEvent "
    :onHide =" callbackEvent "
    :onFocus =" callbackEvent "
    :onSelect =" callbackEvent "
    :onBeforeAjax =" callbackEvent "
    :onAjaxProgress =" callbackEvent "
    :onAjaxLoaded =" callbackEvent "
    :onShouldRenderChild =" renderChild "
  >
  </ autocomplete >

</ template > 

Реквизит

URL* (Строка)

URL-адрес должен быть активным (не из файла). компонент будет получать JSON с этого URL-адреса и передавать один запрос параметров (по умолчанию: q ). нравиться:

 http://some-url.com/API/list?q=

Внутри компонента нет фильтров и ограничений действий. Итак, сделайте это в своей логике API.

параметр (строка: «q»)

имя параметра поиска для запроса в вызове Ajax. по умолчанию — q

мин (Количество: 0)

Минимальное количество вводимых символов перед выполнением поискового запроса. по умолчанию 0

якорь* (Строка)

Это путь к свойству объекта, который используется для привязки в списке предложений. Пример anchor="name" получит свойство имени вашего объекта JSON. Как («Bambang», «Sukijan», «Bejo») в демо выше. Или вы можете достичь глубокой ценности вашего объекта. Нравится anchor="geometry.location.lat"

метка (строка)

То же, что и якорь, но используется для подзаголовка или описания списка.

опции (массив)

Вручную передайте массив параметров списка для автозаполнения.

filterByAnchor (логическое значение: true)

Когда вы используете реквизиты параметров, вы можете использовать автозаполнение для фильтрации ваших данных. Или вы можете просто показать свои данные напрямую, без какого-либо фильтра автозаполнения. Параметры будут отфильтрованы по якорю и в соответствии с вводом пользователя.

encodeParams (логическое значение: true)

Автозаполнение encodeURIComponent все ваши параметры перед отправкой ajax, когда для этого реквизита установлено значение true . По умолчанию true #35

устранение дребезга (число)

Время задержки перед выполнением ajax для данных

требуется (логическое значение)

Обязательный атрибут для ввода

заполнитель (строка)

Заполнитель для ввода

имя класса (строка)

Имя пользовательского класса для компонента автозаполнения

классы (Объект)

Особый пользовательский класс для каждой части. доступны: оболочка, ввод, список и элемент

идентификатор (строка)

Пользовательское имя идентификатора для компонента автозаполнения

устранение дребезга (число)

Количество миллисекунд, в течение которых пользователь должен прекратить вводить текст перед отправкой запроса. По умолчанию установлено значение 0, что означает, что все запросы отправляются немедленно.

процесс (функция)

Функция для обработки результата API. Должен возвращать массив записей или объект, свойства которого можно перечислить.

шаблон (функция)

Функция для обработки каждого результата. Принимает тип элемента ответа API и должен возвращать данные HTML.

События обратного вызова

Вы можете сделать событие обратного вызова через реквизит.

onInput (функция)

При событии ввода в автозаполнении

onShow (функция)

При показе события в списке автозаполнения

onBlur (функция)

Когда автозаполнение размыто

onHide (функция)

Когда список автозаполнения скрыт

onFocus (функция)

При автозаполнении ввода в режиме фокусировки

onSelect (функция)

Когда пользователь выбрал один элемент в списке

onBeforeAjax (функция)

Перед отправкой ajax

onAjaxProgress (функция)

Пока ajax извлекает данные

onAjaxLoaded (функция)

Когда процесс ajax полностью загружен

onShouldGetData (функция)

Вручную обработайте весь процесс ajax. Если это обещание, оно должно разрешить параметры списка автозаполнения. Если это не обещание, вы можете вручную передать параметры реквизитам автозаполнения.

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldGetData =" getData "
>
</ autocomplete > 

methods: {
  promise ( value ) {
    return new Promise ( ( resolve , reject ) => {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete
        resolve ( response . results )
      } ) ;
      ajax . send ( ) ;
    } )
  } ,

  nonPromise ( ) {
    getData ( value ) {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete props
        this . options = response . results ;
      } ) ;
      ajax . send ( ) ;
    } ,
  }
} 

процесс (функция)

Обработайте результат перед получением массива результатов. Здесь вы можете формировать свои данные до того, как они будут переданы в автозаполнение.

onShouldRenderChild (функция)

Хотите использовать собственный шаблон для списка? Теперь вы можете это сделать!

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldRenderChild =" renderChild "
>
</ autocomplete > 

methods: {
  renderChild ( data ) {
    return `
      <img src=" ${ data . src } " />
      <span> ${ data . something } </span>
    `
  } ,
} 

Методы

Вы можете выполнить некоторые методы, обратившись к компоненту через JavaScript.

 this . $refs . autocomplete . someMethod ( ) 

setValue (строка)

Чтобы установить значение ввода автозаполнения

Спасибо, что сделали это полезным~

Давайте поговорим о некоторых проектах со мной

Просто свяжитесь со мной по адресу:

• Электронная почта: [email protected]
• Идентификатор Skype: bosnaufal254
• Твиттер: @BosNaufal

Лицензия

MIT Copyright (c) 2016 – навсегда Науфал Раббани