pespantelis / Vue Typeahead
Licence: mit
🔍 Typeahead component for Vue.js
Stars: ✭ 517
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Typeahead
react-thailand-address-typeahead
jquery.Thailand.js in React
Stars: ✭ 78 (-84.91%)
Mutual labels: typeahead
Autocomplete
Accessible autocomplete component for vanilla JavaScript and Vue.
Stars: ✭ 277 (-46.42%)
Mutual labels: typeahead
purescript-halogen-select
Building blocks for common selection user interfaces in PureScript & Halogen
Stars: ✭ 62 (-88.01%)
Mutual labels: typeahead
vue-single-select
single select dropdown with autocomplete
Stars: ✭ 43 (-91.68%)
Mutual labels: typeahead
indicium
🔎 A simple in-memory search for collections and key-value stores.
Stars: ✭ 41 (-92.07%)
Mutual labels: typeahead
Accessible Autocomplete
An autocomplete component, built to be accessible.
Stars: ✭ 474 (-8.32%)
Mutual labels: typeahead
ngx-typeahead
Typeahead multi-select dropdown component for angular. Demo:
Stars: ✭ 22 (-95.74%)
Mutual labels: typeahead
svelte-typeahead
Accessible, fuzzy search typeahead component
Stars: ✭ 141 (-72.73%)
Mutual labels: typeahead
react-abstract-autocomplete
Bring-Your-Own-UI autocomplete / mentions component for React.
Stars: ✭ 15 (-97.1%)
Mutual labels: typeahead
Vue Tagsinput
A simple tags input with typeahead (autocomplete) built with Vue.js 2.
Stars: ✭ 375 (-27.47%)
Mutual labels: typeahead
Aurelia-Bootstrap-Plugins
Aurelia-Bootstrap-Plugins are Custom Elements to bridge with a set of 3rd party Bootstrap addons
Stars: ✭ 45 (-91.3%)
Mutual labels: typeahead
ng-sq-ui
Flexible and easily customizable UI-kit for Angular 11+
Stars: ✭ 99 (-80.85%)
Mutual labels: typeahead
svelecte
Selectize-like component written in Svelte, also usable as custom-element 💪⚡
Stars: ✭ 121 (-76.6%)
Mutual labels: typeahead
VueTypeahead
See a live demo here.
Install
NPM
Available through npm as vue-typeahead
.
npm install --save vue-typeahead
Also, you need to install a HTTP client like
axios
.
Usage
If you are using extends
property (see below).
Otherwise, the mixins
way also works.
<template>
<div>
<!-- optional indicators -->
<i class="fa fa-spinner fa-spin" v-if="loading"></i>
<template v-else>
<i class="fa fa-search" v-show="isEmpty"></i>
<i class="fa fa-times" v-show="isDirty" @click="reset"></i>
</template>
<!-- the input field -->
<input type="text"
placeholder="..."
autocomplete="off"
v-model="query"
@keydown.down="down"
@keydown.up="up"
@keydown.enter="hit"
@keydown.esc="reset"
@blur="reset"
@input="update"/>
<!-- the list -->
<ul v-show="hasItems">
<!-- for [email protected] use: ($item, item) -->
<li v-for="(item, $item) in items" :class="activeClass($item)" @mousedown="hit" @mousemove="setActive($item)">
<span v-text="item.name"></span>
</li>
</ul>
</div>
</template>
<script>
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
}
}
}
</script>
<style>
li.active {
/* ... */
}
</style>
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].