typeahead for vue2 Based onhttps://github.com/pespantelis/vue-typeahead
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
Prepared rewrite by vue2.5 and bootstrap 4
npm install vue2-typeahead --save
import TypeAhead from 'vue2-typeahead'
or import TypeAhead from 'vue2-typeahead/src/components/TypeAhead.vue'
<TypeAhead
src="/static/data.json?keyword=:keyword"
:getResponse="getResponse"
></TypeAhead>
methods: {
getResponse: function (response) {
return response.data.items
}
}
You can get the result by set v-model=""
attribute
other attribute will bind on <input />
like disabled on v1.3.0
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
<TypeAhead
v-model="data"
:classes="classes"
:placeholder="placeholder"
src="/static/data.json?keyword=:keyword"
:getResponse="getResponse"
:selectFirst="selectFirst"
:limit="parseInt(limit)"
:queryParamName="queryParamName"
:minChars="parseInt(minChars)"
:delayTime="parseInt(delayTime)"
:onHit="onHit"
:highlighting="highlighting"
:render="render"
:fetch="fetch"
></TypeAhead>
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: {
TypeAhead
}
vue2-typeahead is released under the MIT License. See the bundled LICENSE file for details.