v-suggestions
suggestions with custom templates
Installation
# npmnpm install v-suggestions# yarnyarn add v-suggestions
Vue
Component supports Vue 2.1.0+ version. v-suggetions uses slot-scope based templates for customizing suggestions.
Demo
Online demo is also available!
User Guide
Property | Type | Description |
---|---|---|
v-model | String | an empty or predefined string as search query |
onInputChange | Function | When the search query is changed, this function will be trigerred. The function should return an array of objects for the Component to render. It can also return a Promise instead of a set of objects. AJAX calls or delays can be addressed. |
onItemSelected | Function (optional) | When user selects (clicks or presses enter on an item), this function will be called |
options | Object | A set of options for customization of the component |
options.debounce | Integer | A delay in milliseconds between each "onInputChange" events. If unspecified, it will be ignored. Comes in handy for ajax requests. See examples. |
options.placeholder | string | A placeholder string for search (optional) |
options.inputClass | string | Override classnames given to the input text element (optional) |
Simple Example
{ let countries = 'Afghanistan' 'Åland Islands' 'Albania' 'Algeria' 'American Samoa' 'AndorrA' 'Angola' 'Anguilla' 'Antarctica' 'Antigua and Barbuda' 'Argentina' 'Armenia' 'Aruba' 'Australia' 'Austria' 'Azerbaijan' 'Bahamas' 'Bahrain' 'Bangladesh' 'Barbados' 'Belarus' 'Belgium' 'Belize' return query: '' countries: countries selectedCountry: null options: {} } methods: { if querylength === 0 return null // return the matching countries as an array return thiscountries } { thisselectedCountry = item } { thisselectedSearchItem = item }
Ajax based results with custom template (Duckduckgo API)
{{props.item.Text}}
{ return searchQuery: '' selectedSearchItem: null options: {} } methods: { if querylength === 0 return null const url = `http://api.duckduckgo.com/?q=&format=json&pretty=1` return { axios } } { thisselectedSearchItem = item }