Typeahead Component For Vue.js 2

Typeahead Component For Vue.js 2

A typeahead/autocomplete component for Vue.js 2 based applications.


typeahead for vue2
Based onhttps://github.com/pespantelis/vue-typeahead

Quick preview

demo Demo

Run demo

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev


Prepared rewrite by vue2.5 and bootstrap 4

How to use

  1. ~~Please install axios~~
  2. It base on bootstrap css
  3. npm install vue2-typeahead --save
  4. import and use it import TypeAhead from 'vue2-typeahead' or import TypeAhead from 'vue2-typeahead/src/components/TypeAhead.vue'
  5. config (you can get a config sample from Demo.vue)



methods: {
      getResponse: function (response) {
        return response.data.items

Config props


You can get the result by set v-model="" attribute


  1. src: The api url for get the data
  2. getResponse: The function to get a array form response


  1. selectFirst default:false auto select first item
  2. queryParamName default::keyword this will be replace to what you input in ajax request
  3. limit default:9999 how many items will show in the list
  4. minChars default:2 only words length large than this number can emit the request
  5. delayTime default:500 delay time for emit the request for avoiding request when inputing
  6. placeholder default:null placeholder
  7. classes default:null the class you want add to input component
  8. onHit default:Function how to use the things you hit
  9. highlighting default:Function highlighting every item
  10. render default:Function to render the lists which will be show
  11. fetch default:Function how to send the url

What you can get in instance

Some function will return vue object, it is the instance of component and i use it to change the query, you can also get some useful data by it

  1. items: option list after render function
  2. current: current id is select or cursor is hover
  3. data: the response data of fetch

A Complete Config Sample

    data () {
      return {
        data: '',
        selectFirst: false,
        limit: 9999,
        queryParamName: ':keyword',
        minChars: 2,
        delayTime: 500,
        placeholder: 'Please input something',
        classes: 'typeahead'
    methods: {
      getResponse: function (response) {
        return response.data.data.items
      onHit: function (item, vue, index) {
        vue.query = item
      highlighting: function (item, vue) {
        return item.toString().replace(vue.query, `<b>${vue.query}</b>`)
      render: function (items, vue) {
        // 将搜索内容作为list的第一个
        let newItem = [vue.query, ...items]
        return newItem
      fetch: function (url) {
        return axios.get(url)
    components: {


vue2-typeahead is released under the MIT License. See the bundled LICENSE file for details.

Github Repository

Tags: #VueJs