The vue-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.
| Props | Description | Type |
|---|---|---|
id |
Specifies a unique id for an HTML element. | String |
placeholder |
A short hint that describes the expected value of input field. | String |
api |
GET List of items, optionally using pagination, sorting and filtering to navigate big lists. | URI |
attr |
An Object Key, representing the "rendered" text content of a dropdown-list element | Object Key |
value |
An Object Key, specifies the return string value of the list element on selection. | Object Key |
reset |
A true/false toggle to force reset/empty the input field. | Boolean |
text |
A String to force set the value of input field. | String |
| Events | Description |
|---|---|
tab |
Fired on Tab key Press & on selections. |
selected |
Fired on Selection and returns entire selected object. |
newVal |
Fired when input changes with the updated string value. |
Use GET requests to retrieve resource representation/information. URI Must end with a query parameter name & equal sign
[
{
"name": "Edward F Woods"
"address":"2356 Philadelphia Avenue",
"phoneNumber":"801-261-4941"
},
{
"name":"Stephen F Houser",
"address":"896 Cedarstone Drive",
"phoneNumber":"419-491-9630"
}
]<template>
<div>
<AutoComplete
id="search"
placeholder="Eg: John Doe"
attr="name"
value="name"
api="/users?q="
@tab="$refs.age.focus()"
@selected="selectUser"
@newVal="
val => {
person.name = val;
}
"
/>
<!--Some other fields -->
<input type="number" ref="age" />
</div>
</template>
/>import AutoComplete from "AutoComplete";
export default {
data() {
return {
person: {
name: "",
address: "",
phoneNumber: "",
},
};
},
methods: {
selectUser(user) {
this.person.address = user.address;
this.person.phoneNumber = user.phoneNumber;
},
},
components: {
AutoComplete,
},
};Stylings uses Bootstrap CSS by default. Example:
| Class | Description |
|---|---|
.active |
Adds a blue background color to the active dropdown item in a dropdown. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent