vue-autocomplete使用

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过程。如果它是一个承诺，它应该解决自动完成列表的选项。如果它不是一个承诺，你可以手动将选项传递给自动完成的道具。