Skip to content
πŸ” Vue autosuggest component.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github First. Oct 16, 2017
.storybook feat(2.0) v-model, slots, perf, etc. (#93) May 17, 2019
__tests__ fix(slots) return empty array, test multiple vues (#112) May 23, 2019
build feat(events) add suggestion as event @suggestion Oct 3, 2018
docs feat(2.0) v-model, slots, perf, etc. (#93) May 17, 2019
other First. Oct 16, 2017
src fix(slots) return empty array, test multiple vues (#112) May 23, 2019
.all-contributorsrc docs(contributors) add chuca Apr 5, 2019
.babelrc getSuggestionValue and renderSuggestion props (#21) Jan 2, 2018
.eslintrc.js feat(events) add suggestion as event @suggestion Oct 3, 2018
.gitattributes First. Oct 16, 2017
.gitignore Feature/vue test utils tests (#10) Nov 3, 2017
.npmrc First. Oct 16, 2017
.prettierignore feat: General autosuggest fixes. Scoped slots. Added docs. #1 #4 Oct 17, 2017
.prettierrc.js feat(listeners): add support for native listeners Mar 26, 2018
.travis.yml fix(slots) return empty array, test multiple vues (#112) May 23, 2019
CHANGELOG.md docs(changelog) add v1.8.1 Jan 14, 2019
CONTRIBUTING.md Add correct link and remove duplication in Contributing page Aug 23, 2018
LICENSE First. Oct 16, 2017
README.md docs(readme) my website link updated May 24, 2019
package.json fix(slots) return empty array, test multiple vues (#112) May 23, 2019
yarn-error.log feat(2.0) v-model, slots, perf, etc. (#93) May 17, 2019
yarn.lock feat(2.0) v-model, slots, perf, etc. (#93) May 17, 2019

README.md

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 --save 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

<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 <input/> 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 above all the results inside the results container.

<vue-autosuggest ...>
  <template slot="header">
    <h1>header content goes here</h1>
  </template>
  <template slot="footer">
    <h1>footer content goes here</h1>
  </template>
</vue-autosuggest>

suggestion item (i.e. default slot)

Used to style each suggestion inside the <li> 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.

<vue-autosuggest>
  <template slot-scope="{suggestion}">
    <!-- suggestion.name corresponds to which section the item is in -->
    <div v-if="suggestion.name === 'blog'">
      <!-- suggestion.item corresponds to the suggestion object -->
      <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 <input>.
section-configs Object Define multiple sections <input>.
render-suggestion Function Tell vue-autosuggest how to render inside the <li> tag. Overrides what is inside the default suggestion template slot.
get-suggestion-value Function Tells vue-autosuggest what to put in the <input/> value
@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 <input>.
Any DOM Props * You can add any props to <input> 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 <li> 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:

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 <input/> as the value.

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

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 can’t perform that action at this time.