Vue-Suggest
Simple autocomplete search component for Vue
This is a simple autocomplete search component for Vue.
Why yet another autocomplete component?
Well, because I needed it in my own projects. The existing awesome autocomplete components didn't quite fit my needs.
So, what makes it different?
This autocomplete component will be the component you need if you want:
- no styling
- no functionality for getting options from an endpoint.
- simple interface
- a customizable render/template for the options through scoped slots
- enables and requires use of the
v-modelbinding for custom input components
Installation
As a npm module
npm install vue-suggest --save-dev
Then just include it in your project
import VueSuggest from 'vue-suggest'
Browser
Use the minified browser plugin version in vue-suggest.plugin.js. This plugin auto-installs once it is loaded in the browser - making the vue-suggest component available right away.
Just do
<script src="https://unpkg.com/vue">script>
<script src="https://unpkg.com/vue-suggest/dist/vue-suggest.plugin.js">script>
Usage
See the basic example Allways use v-model attribute.
Events
The search element emits three events.
| Event | Attributes | Description |
|---|---|---|
| input | keyword | This is triggered every time the input changes, and the keyword contains what is currently in the search field. |
| search | keyword | If the user searches (press enter) while in the search field. Keyword is the current search phrase. |
| select | option | If the user picks from the suggestion list, the full option item is emitted in the select event |
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| options | Array | Array of current suggestions. This should be a filtered list based on the keyword emitted in the autocomplete event. Should be an array of strings or objects | - |
| value | String | The value used in v-model binding | - |
| wrapper-classes | String | Used to customize appearance. Adds classnames to the wrapper div. | suggest-search |
| input-classes | String | Used to customize appearance. Adds classnames to the input element. | suggest-input |
| list-classes | String | Used to customize appearance. Adds classnames to the unordered options list. | suggest-list |
| item-classes | String | Used to customize appearance. Adds classnames to the option list items. | suggest-item |
| placeholder | String | Used to customize appearance. Adds placeholder text in search box. | Search.. |
| required | Boolean | Used to customize the required attribute of the input element. | false |
| autofocus | Boolean | Used to customize the autofocus attribute of the input element. | false |
Customizing the template for each option in the list.
This is acieved through scoped slots
A slot named item is available in the component. The option data is passed in the prop data. A sample customized item would for example be:
<vue-suggest
:options="options"
v-model="value"
@select="logSelect"
@search="logSearch">
<template slot="item" slot-scope="myslotscope">
<div class="my-scoped-slot-class">
<strong>{{ myslotscope.data }}strong>
div>
template>
vue-suggest>
Rendered HTML
The rendered HTML is pretty simple:
<div class="suggest-wrap"> <input placeholder="Search.." autocomplete="off" class="suggest-input"> <ul class="suggest-list" style="display: none;"> <li class="suggest-item">Itemli> <li class="suggest-item highlighted">Highlighted itemli> ul> div>
Kudos
- Taha Shashtari for his tutorial on Vue autocomplete with scoped slots
0 Dec 12, 2019
74 Aug 27, 2022
420 Dec 27, 2022
52 Jan 8, 2023
39 Mar 26, 2022
1 Nov 6, 2021
0 Jul 8, 2021
209 Nov 19, 2022
3 Nov 8, 2020
0 Dec 3, 2019
48 Dec 28, 2022
347 Jan 3, 2023
136 Nov 8, 2022
442 Jan 4, 2023
27 Nov 24, 2022
210 Jan 18, 2022
28 Jul 19, 2022
462 Dec 22, 2022
0 Oct 12, 2017