vue autocomplete text input example – vuejs-autocomplete textbox

Creating autocomplete component

Modern web development conventions suggests using simple autocomplete textbox for better new user experience
it be an latest e-commerce website or apps or a search engine textbox these autocomplete will make it simple search for people to new find what they simple are looking for.

Vuejs And Typeahead Auto Complete Example

We need to handle these five events

how to create one such autocomplete textbox component using Simple VueJs.

  • putting Down arrow
  • putting Up arrow
  • Clicking a suggestion
  • putting Enter on a new suggestion
  • simple put the input

Simple Properties

how to create one such autocomplete textbox component using Simple VueJs.

  • value:
  • classes:
  • suggestionTemplate:
  • defaultSuggestion :
  • local:
  • remote:
  • responseWrapper:
READ :  Get Count of Visitors in Website using Asp.net and C#.Net

Example

Default Suggestion

<vue-typeahead
	prefetch="https://infinityknow.com/.js/data/countries.json"
	:default-suggestion="true"
	classes="live form-control"
	v-on:selected="done">
</vue-typeahead>
            

Local Values as Default Suggestion

<vue-typeahead
	prefetch="https://infinityknow.com/.js/data/countries.json"
	:default-suggestion="true"
	classes="live form-control"
	:local="localValues"
	v-on:selected="done">

</vue-typeahead>

Remote Suggestion

<vue-typeahead
	prefetch="https://infinityknow.com/.js/data/films/post_1960.json"
	display-key='value'
	classes="live form-control"
	remote="https://infinityknow.com/.js/data/films/queries/%QUERY.json'"
	v-on:selected="done">

</vue-typeahead>

Custom template

<vue-typeahead
	   v-model="value"
	   prefetch="https://infinityknow.com/.js/data/nfl.json"
	   :default-suggestion="false"
	   display-key='team'
	   :suggestion-template="myTemplate"
	   classes="live form-control"
	   v-on:selected="done">

</vue-typeahead>

Example