https://github.com/BosNaufal/vue2-autocomplete
https://www.npmjs.com/package/jquery-autocompleter
1.从接口获取数据自动补全
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"
>
属性介绍
url：
URL必须是活动的(而不是文件)。该组件将从该URL获取JSON并传递一个params(默认:q)查询。如:
http://some-url.com/API/list?q=
在组件内部没有过滤器和限制操作。在你的API逻辑中。
param ：
在Ajax调用中查询的搜索参数的名称。
min :
执行搜索查询之前输入的最小输入字符
anchor:
anchor="name"将获得JSON对象的名称属性。
label:
和anchor一样，但它用于副标题或列表的描述。
options(Array):
手动传递一组列表选项到自动完成
filterByAnchor:
当您使用选项道具时，您可以使用自动完成来过滤您的数据。或者您可以直接显示您的数据，而不需要任何自动完成的过滤器。选项将根据用户输入进行锚定和过滤。
encodeParams (Boolean: true):
在ajax发送之前，自动完成将会将所有的参数设置为encodeURIComponent，当这些道具设置为true时。默认是true
debounce (Number):
在为数据执行ajax之前，延迟时间。
required (Boolean):
输入所需要的属性
placeholder (String)
占位符
className (String):
自动完成组件的自定义类名。
classes (Object)；
每个部分的Spesific自定义类。可用:包装器、输入、列表和项。
id (String)
自动完成组件的自定义id名称。
debounce (number)：
在发送请求之前，用户应该停止输入的毫秒数。默认值为0，意味着所有请求都将立即发送。
process (Function)：
用于处理API结果的函数。应该返回一个条目数组或一个属性可以被枚举的对象。
template (Function)：
处理每个结果的函数。获取API应答元素的类型，并返回HTML数据。
Callback Events/回调事件
onInput(函数)
在自动完成的输入事件上。
onShow(函数)
在自动完成列表中显示事件。
onBlur(函数)
当自动完成长途跋涉
onHide(函数)
当自动完成列表被隐藏。
得到焦点(函数)
在焦点模式下自动完成输入。
onSelect(函数)
当用户在列表中选择一个项目时。
onBeforeAjax(函数)
在ajax之前发送
onAjaxProgress(函数)
而ajax正在获取数据。
onAjaxLoaded(函数)
当ajax进程完全加载时。
onShouldGetData(函数)
手工处理整个ajax过程。如果它是一个承诺，它应该解决自动完成列表的选项。如果它不是一个承诺，你可以手动将选项传递给自动完成的道具。