vue-autocomplete使⽤
1.从接⼝获取数据⾃动补全
url="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：
input绑定onblur事件URL必须是活动的(⽽不是⽂件)。该组件将从该URL获取JSON并传递⼀个params(默认: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过程。如果它是⼀个承诺，它应该解决⾃动完成列表的选项。如果它不是⼀个承诺，你可以⼿动将选项传递给⾃动完成的道具。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。