https://github.com/pespantelis/vue-typeahead

:mag: Typeahead component for Vue.js
https://github.com/pespantelis/vue-typeahead

javascript typeahead vue

Last synced: about 2 months ago
JSON representation

:mag: Typeahead component for Vue.js

• Host: GitHub
• URL: https://github.com/pespantelis/vue-typeahead
• Owner: pespantelis
• License: mit
• Created: 2015-08-23T16:42:09.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-11-18T19:53:59.000Z (almost 6 years ago)
• Last Synced: 2024-04-24T08:15:47.446Z (5 months ago)
• Topics: javascript, typeahead, vue
• Language: JavaScript
• Homepage: http://pespantelis.github.io/vue-typeahead
• Size: 806 KB
• Stars: 517
• Watchers: 19
• Forks: 98
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VueTypeahead

See a live demo [here](http://pespantelis.github.io/vue-typeahead/).

## Install

#### NPM

Available through npm as `vue-typeahead`.

```

npm install --save vue-typeahead

```

> Also, you need to install a HTTP client like [`axios`](https://github.com/mzabriskie/axios).

## Usage

If you are using `[email protected]+`, you could use the new [`extends`](http://vuejs.org/api/#extends) property (see below).

Otherwise, the `mixins` way also works.

```html

  


    

    

    

      

      

    


    

    

    

    


      

      


        

      

    

  


import VueTypeahead from 'vue-typeahead'

export default {

  extends: VueTypeahead, // [email protected]+

  // mixins: [VueTypeahead], // [email protected]

  data () {

    return {

      // The source url

      // (required)

      src: '...',

      // The data that would be sent by request

      // (optional)

      data: {},

      // Limit the number of items which is shown at the list

      // (optional)

      limit: 5,

      // The minimum character length needed before triggering

      // (optional)

      minChars: 3,

      // Highlight the first item in the list

      // (optional)

      selectFirst: false,

      // Override the default value (`q`) of query parameter name

      // Use a falsy value for RESTful query

      // (optional)

      queryParamName: 'search'

    }

  },

  methods: {

    // The callback function which is triggered when the user hits on an item

    // (required)

    onHit (item) {

      // alert(item)

    },

    // The callback function which is triggered when the response data are received

    // (optional)

    prepareResponseData (data) {

      // data = ...

      return data

    }

  }

}

  li.active {

    /* ... */

  }

```

## Key Actions

**Down Arrow:** Highlight the previous item.

**Up Arrow:** Highlight the next item.

**Enter:** Hit on highlighted item.

**Escape:** Hide the list.

## States

**loading:** Indicates that awaits the data.

**isEmpty:** Indicates that the input is empty.

**isDirty:** Indicates that the input is not empty.

> Useful if you want to add icon indicators (see the demo)

## License

VueTypeahead is released under the MIT License. See the bundled LICENSE file for details.