Typeahead with Vue.js 2.0
Solution 1
I've been a user of vue-strap, and it is not maintaining for a long time... (both vue 1 version and vue 2 fork)
check this out (created by myself): https://uiv.wxsm.space/typeahead/
(A simple but elegant typeahead implementation with Vue 2 & Bootstrap 3)
Install:
$ npm install uiv --save
Example usage:
<template>
<section>
<label for="input">States of America:</label>
<input id="input" class="form-control" type="text" placeholder="Type to search...">
<typeahead v-model="model" target="#input" :data="states" item-key="name"/>
</section>
</template>
<script>
import {Typeahead} from 'uiv'
import states from '../../assets/data/states.json'
export default {
components: {Typeahead},
data () {
return {
model: '',
states: states.data
}
}
}
</script>
<!-- typeahead-example.vue -->
Solution 2
Check out this component:
https://github.com/pespantelis/vue-typeahead
Also, there is a great collection of vue components already:
Related videos on Youtube
Auguste Van Nieuwenhuyzen
.NET and JavaScript software developer and consultant in Cambridge. Into software, videogames and technology.
Updated on June 04, 2022Comments
-
Auguste Van Nieuwenhuyzen almost 2 years
Total Vue noob here. Just wanted a typeahead component for Vue. Bootstrap has one, but I have no idea how to integrate the two!
And the only options I can find are either for Vue 1.x only or terribly documented (and the main effort to port Bootstrap components to Vue 2.x doesn't appear to include typeahead.)
-
Auguste Van Nieuwenhuyzen over 7 years@flyingSmurfs yes. There's a branch moving it to Vue 2.0 (issue: github.com/yuche/vue-strap/issues/378), but the typeahead component currently in there only appears to work with Vue 1.0. (I do wish they'd make it clearer on the site! That was a waste of time finding out!!)
-
-
Auguste Van Nieuwenhuyzen over 7 yearsVue-typeahead is what I was referring to when I said 'terribly documented' :) I think you meant to link to: vuecomponents.com - the www site is WEIRD. And, the only other similar component on vuecomponents is 'autocomplete' - which didn't /seem/ as good as Twitter's typeahead - but I might be wrong!
-
Auguste Van Nieuwenhuyzen over 7 yearsvue-strap typeahead
-
redshift over 6 yearsGreat answer. How would you set it up so instead of just an array of strings, you were using a JSON object? E.g.
officeList = [{name: "abc", color: "red"}, {...snip..}]
-
Al0x over 6 yearsPlease provide a code example.
-
wxsm over 6 years@Al0x example added.
-
Aakash almost 6 yearsI'm currently working with this: github.com/trionfo1993/vue2-typeahead
-
Jepzen almost 6 years@wxsm can you help with this question stackoverflow.com/questions/50158321/… ?
-
Arthur Hylton over 5 yearsI am new to vuejs (1 day so far). I don't understand what to do with this code and your answer keeps coming up in all my searches. Should I create my own .vue file and paste this code inside? Should I drop this code directly in my html file?... Please help me to understand.