🔍 Autosuggest component built for Vue

Overview

Vue logo

vue-autosuggest

🔍 Autosuggest component built for Vue.


Build Status Code Coverage version downloads MIT License gzip size

All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

Table of Contents

Examples

Features

  • WAI-ARIA complete autosuggest component built with the power of Vue.
  • Full control over rendering with built in defaults or custom components for rendering.
  • Easily integrate AJAX data fetching for list presentation.
  • Supports multiple sections.
  • No opinions on CSS, full control over styling.
  • Rigorously tested.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install vue-autosuggest

or

yarn add vue-autosuggest

Usage

Load VueAutosuggest into your vue app globally.

import VueAutosuggest from "vue-autosuggest";
Vue.use(VueAutosuggest);

or locally inside a component:

import { VueAutosuggest } from 'vue-autosuggest';
export default {
  ...
  components: {
      VueAutosuggest
  }
  ...
};

Place the component into your app!

">
<vue-autosuggest
    :suggestions="[{data:['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn']}]"
    :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}"
    @input="onInputChange"
    @selected="selectHandler"
    @click="clickHandler"
>  
  <template slot-scope="{suggestion}">
    <span class="my-suggestion-item">{{suggestion.item}}span>
  template>
vue-autosuggest>

Advanced usage:

Click to expand

You have selected {{selected.name}}, the {{selected.race}}
{{suggestion.item.name}}
">
<template>
  <div class="demo">
    <div v-if="selected" style="padding-top:10px; width: 100%;">
      You have selected <code>{{selected.name}}, the {{selected.race}}code>
    div>
    <div class="autosuggest-container">
      <vue-autosuggest
        v-model="query"
        :suggestions="filteredOptions"
        @focus="focusMe"
        @click="clickHandler"
        @input="onInputChange"
        @selected="onSelected"
        :get-suggestion-value="getSuggestionValue"
        :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}">
        <div slot-scope="{suggestion}" style="display: flex; align-items: center;">
          <img :style="{ display: 'flex', width: '25px', height: '25px', borderRadius: '15px', marginRight: '10px'}" :src="suggestion.item.avatar" />
          <div style="{ display: 'flex', color: 'navyblue'}">{{suggestion.item.name}}div>
        div>
      vue-autosuggest>
    div>
  div>
template>

<script>
import { VueAutosuggest } from "vue-autosuggest";

export default {
  components: {
    VueAutosuggest
  },
  data() {
    return {
      query: "",
      selected: "",
      suggestions: [
        {
          data: [
            { id: 1, name: "Frodo", race: "Hobbit", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/4/4e/Elijah_Wood_as_Frodo_Baggins.png/220px-Elijah_Wood_as_Frodo_Baggins.png" },
            { id: 2, name: "Samwise", race: "Hobbit", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/7/7b/Sean_Astin_as_Samwise_Gamgee.png/200px-Sean_Astin_as_Samwise_Gamgee.png" },
            { id: 3, name: "Gandalf", race: "Maia", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/e/e9/Gandalf600ppx.jpg/220px-Gandalf600ppx.jpg" },
            { id: 4, name: "Aragorn", race: "Human", avatar: "https://upload.wikimedia.org/wikipedia/en/thumb/3/35/Aragorn300ppx.png/150px-Aragorn300ppx.png" }
          ]
        }
      ]
    };
  },
  computed: {
    filteredOptions() {
      return [
        { 
          data: this.suggestions[0].data.filter(option => {
            return option.name.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
          })
        }
      ];
    }
  },
  methods: {
    clickHandler(item) {
      // event fired when clicking on the input
    },
    onSelected(item) {
      this.selected = item.item;
    },
    onInputChange(text) {
      // event fired when the input changes
      console.log(text)
    },
    /**
     * This is what the  value is set to when you are selecting a suggestion.
     */
    getSuggestionValue(suggestion) {
      return suggestion.item.name;
    },
    focusMe(e) {
      console.log(e) // FocusEvent
    }
  }
}
script>

<style>
.demo { 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input {
  width: 260px;
  padding: 0.5rem;
}

ul {
  width: 100%;
  color: rgba(30, 39, 46,1.0);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 .5rem 0;
}
li {
  margin: 0 0 0 0;
  border-radius: 5px;
  padding: 0.75rem 0 0.75rem 0.75rem;
  display: flex;
  align-items: center;
}
li:hover {
  cursor: pointer;
}

.autosuggest-container {
  display: flex;
  justify-content: center;
  width: 280px;
}

#autosuggest { width: 100%; display: block;}
.autosuggest__results-item--highlighted {
  background-color: rgba(51, 217, 178,0.2);
}
style>

For more advanced usage, check out the examples below, and explore the properties you can use.

Slots

header/footer

Slots for injecting content around the results/input. Useful for header/footer like slots or empty state.

content before the goes here ">
<vue-autosuggest ...>
  <template slot="before-input"> content before the <input /> goes here template>
  <template slot="after-input"> content after the <input /> goes here template>
  <template slot="before-suggestions"> content before the <ul> goes here template>
  <template slot="before-section-"> section header content for specific section goes here template>
  <template slot="after-section-"> footer content goes here for specific section. template>
  <template slot="after-section"> Default footer content for all sections template>
  <template slot="after-suggestions"> content after the <ul> goes here template>
vue-autosuggest>

suggestion item (i.e. default slot)

Used to style each suggestion inside the

  • tag. Using scoped slots you have access to the suggestion item inside the v-for suggestions loop. This gives you the power of Vue templating, since vue-autosuggest does not have an opinion about how you render the items in your list.

    {{suggestion.item}}
    ">
    <vue-autosuggest>
      <template slot-scope="{suggestion}">
        
        <div v-if="suggestion.name === 'blog'">
          
          <a target="_blank" :href="suggestion.item.url">{{suggestion.item.value}}a>
        div>
        <div v-else>{{suggestion.item}}div>
      template>
    vue-autosuggest>

    This slot will be overridden when the render-suggestion prop is used.

    Props

    Prop Type Required Description
    suggestions Array Suggestions to be rendered. e.g.suggestions: [{data: ['harry','ron','hermione']}]
    input-props Object Add props to the .
    section-configs Object Define multiple sections .
    render-suggestion Function Tell vue-autosuggest how to render inside the
  • tag. Overrides what is inside the default suggestion template slot.
  • get-suggestion-value Function Tells vue-autosuggest what to put in the value
    should-render-suggestions Function Tell vue-autosuggest if it should render the suggestions results popover
    @selected Function suggestion select handler. equivalent to sectionConfigs on-selected but for all items
    component-attr-id-autosuggest String id of entire component
    component-attr-class-autosuggest-results-container String class of container of results container
    component-attr-class-autosuggest-results String class of results container

    inputProps

    Prop Type Required Description
    id String id attribute on .
    Any DOM Props * You can add any props to as the component will v-bind inputProps. Similar to rest spread in JSX. See more details here: https://vuejs.org/v2/api/#v-bind. The name attribute is set to "q" by default.

    sectionConfigs

    Multiple sections can be defined in the sectionConfigs prop which defines the control behavior for each section.

    Prop Type Required Description
    on-selected Function Determine behavior for what should happen when a suggestion is selected. e.g. Submit a form, open a link, update a vue model, tweet at Ken Wheeler etc.
    limit Number Limit each section by some value. Default: Infinity

    Below we have defined a default section and a blog section. The blog section has a component type of url-section which corresponds to which component the Autosuggest loads. When type is not defined, Vue-autosuggest will use a built in DefaultSection.vue component.

    sectionConfigs: {
        'default': {
            limit: 6,
            onSelected: function(item, originalInput) {
                console.log(item, originalInput, `Selected "${item.item}"`);
            }
        },
        'blog': {
            limit: 3,
            type: "url-section",
            onSelected: function() {
                console.log("url: " + item.item.url);
            }
        }
    }

    renderSuggestion

    This function can be used to tell vue-autosuggest how to render the html inside the

  • tag when you do not want to use the default template slot for suggestions but would rather have the power of javascript / jsx.

    In its most basic form it just returns an object property:

    renderSuggestion(suggestion) {
        return suggestion.name;
    },

    But usually it returns a JSX fragment, which is transformed into a virtual node description with babel-plugin-transform-vue-jsx:

    {suggestion.name}
    ; },">
    renderSuggestion(suggestion) {
        return <div style={{ color: "red" }}>{suggestion.name}</div>;
    },
  • If you're not using babel-plugin-transform-vue-jsx, you can create the virtual node description yourself:

    renderSuggestion(suggestion) {
        return this.$createElement('div', { 'style': { color: 'red'} }, suggestion.name);
    },

    getSuggestionValue

    This function will tell vue-autosuggest what to put in the as the value.

    getSuggestionValue(suggestion) {
        return suggestion.item.name;
    },

    shouldRenderSuggestions

    This function will tell vue-autosuggest if it should display the suggestions popover

    /**
     * @param {Array} size - total results displayed
     * @param {Boolean} loading - value that indicates if vue-autosuggest _thinks_ that the 
     *                            the popover should be open (e.g. if user hit escape, or
     *                            user clicked away)
     * @returns {Boolean}
     */
    shouldRenderSuggestions (size, loading) {
      // This is the default behavior
      return size >= 0 && !loading
    }

    Inspiration

    Contributors

    Thanks goes to these people (emoji key):


    Darren Jennings

    💻 📖 🚇 ⚠️ 🎨 💡

    Evgeniy Kulish

    💻 🎨 💡 ⚠️

    Scott Smith

    🐛 💻 ⚠️

    Fernando Machuca

    🎨

    Thanks to @chuca for the logo design.

    This project follows the all-contributors specification. Contributions of any kind welcome!

    LICENSE

    MIT

    You might also like...
    Mention component for Vue.js
    Mention component for Vue.js

    vue-mention Mention popper for input and textarea Documentation Sponsors Quick start script import { Mentionable } from 'vue-mention' const users =

    Vue 2 Component to make Autocomplete element.
    Vue 2 Component to make Autocomplete element.

    Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

    A Vue Autocomplete component with accessibility and simplicity in mind.

    VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

    vue autoComplete component

    vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

    Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue
    Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

    Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

    A simple tag component with typeahead
    A simple tag component with typeahead

    v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

    Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.
    Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.

    vue3-simple-typeahead A Vue3 component for a simple typeahead component. It will show a list of suggested items based on the user input. The component

    vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications
    vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

    Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

    Google Autocomplete Vue Componet
    Google Autocomplete Vue Componet

    Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

    A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

    v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

    soraino 9 Nov 24, 2022
    A simple tags input with typeahead (autocomplete) built with Vue.js 2.

    Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

    Landon Gavin 1 Nov 6, 2021
    A simple tags input with typeahead (autocomplete) built with Vue.js 2.

    Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

    null 0 Jul 8, 2021
    Autocomplete component for Vue.js

    v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

    Marcos 347 Jan 3, 2023
    Autocomplete component for Vue js

    vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

    Charlie Kassel 136 Nov 8, 2022
    Feature-rich autocomplete component for Vue.js

    vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

    Marketplace Technologies 442 Jan 4, 2023
    An autocomplete/typeahead component for Vue 2 and Bootstrap 4

    vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

    Alex Urquhart 209 Nov 19, 2022
    A Vue component for autocomplete email domains

    vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

    Danny Feliz 27 Nov 24, 2022
    Autocomplete Component for Vue.Js

    vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

    Naufal Rabbani 210 Jan 18, 2022
    A configurable & lightweight Vue wrapper component that enables

    A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

    James Wylie 28 Jul 19, 2022