typeahead-autocomplete

Description

This package is available for VueJS 2x

View The Examples

Installation

From NPM:

> npm i typeahead-autocomplete

Browser

<script
  type="text/javascript"
  src="node_modules/vuejs/dist/vue.min.js"
></script>
<script
  type="text/javascript"
  src="node_modules/typeahead-autocomplete/dist/typeahead-autocomplete.min.js"
></script>
<script type="text/javascript">
  Vue.use(TypeaheadAutocomplete);
</script>

Usage

Import and register the component

import TypeaheadAutocomplete from "typeahead-autocomplete";

// Global registration
Vue.use(TypeaheadAutocomplete);

// OR

// Local registration
export default {
  components: {
    TypeaheadAutocomplete,
  },
};

Basic Usage

<typeahead-autocomplete
  v-model="selectedValue"
  :items="[
    { 
      text: 'ABC', 
      value: 'abc' 
    }, 
    { 
      text: 'DEF', 
      value: 'def' 
    }, 
    { 
      text: 'GHI', 
      value: 'ghi' 
    }
  ]"
/>

Attributes

Name	Type	Default	Description
items	Array	[]	Array of data.
initialText	String	text	The displayed text at first.
initialValue	String, Number	value	The selected value at first.
bindingText	String	text	Path to the property used to display the text.
bindingValue	String	value	Path to the property used to return the value.
prependText	String		Text used to add at the beginning of the item.
appendText	String		Text used to add at the end of the item.
disableSearch	Boolean	false	Turn off the search function on the input field.
disableInput	Boolean	false	Disable input.
placeholder	String		Placeholder for input field.
inputClass	String		Custom classes for input field.
readOnly	Boolean	false	Set read-only for input field.
showNoData	Boolean	true	Option to show text or not when no data is found.
remoteMode	Boolean	false	Switch to load data through API.
remoteUrl	String		Data request URL (Only works when remoteMode is enabled.
requestTimeout	Number	10000	Maximum time for API to request data (milliseconds) (Only works when remoteMode is enabled.

Events

Name	Description
change	Triggered when an autocomplete item is selected. The entry in the input data array that was selected is returned.
input	Triggered when typing on search box. The typed data is returned.
hit	The component can be used with v-model. The bindingValue of the entry in the input data will be returned
fetch	Return all data from API after successfully fetched.

Slots

prepend and append slots available for adding buttons or other markup. nodata available for customizing the text when no data is found.

Contributing

PR's are welcome!