Typeahead-autocomplete NPM

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.