vue-suggest

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-model binding 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">

    <!--
        Adding a template for the scoped slot.
        Notice that the slot-scope attribute can be name anything you like,
        and that the data prop is available within that scope.
    -->
    <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">Item</li>
        <li class="suggest-item highlighted">Highlighted item</li>
    </ul>
</div>

Kudos

• Taha Shashtari for his tutorial on Vue autocomplete with scoped slots