See a live demo here.
Available through npm as vue-typeahead
.
Vue.use(require('vue-resource'))
require('vue-typeahead')
You can also directly include it with a <script>
tag when you have included Vue and VueResource globally.
Then you can do this:
<typeahead src="..." :on-hit="{{goToPlace}}"></typeahead>
src (required): The source url.
data The data that would be send by request.
limit: Limit the number of items shown in the list. Default: 5.
on-hit(required): The callback function which is triggered when the user hits on an item.
prepare-data The callback function which is triggered when the response data are received.
Down Arrow: Highlight the previous item.
Up Arrow: Highlight the next item.
Enter: Hit on highlighted item.
Escape: Hide the list.
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)
VueTypeahead is released under the MIT Licence. See the bundled LICENSE file for details.