Chosen element: {{ chosen }}
<template> <vue-simple-suggest v-model="chosen" :list="simpleSuggestionList" :filter-by-query="true"> <!-- Filter by input text to only show the matching results --> </vue-simple-suggest> <p class="mt-4">Chosen element: {{ chosen }}</p> </template> <script> export default { data() { return { chosen: '', } }, methods: { simpleSuggestionList() { return [ 'Vue.js', 'React.js', 'Angular.js' ] }, } } </script> <style lang="scss"> @import "@/assets/scss/vuexy/extraComponents/autocomplete.scss"; </style>Selected element ({{ typeof selected }}):
<template> <vue-simple-suggest pattern="\w+" v-model="model" :list="getList" :max-suggestions="10" :min-length="3" :debounce="200" :filter-by-query="false" :prevent-submit="true" :controls="{ selectionUp: [38, 33], selectionDown: [40, 34], select: [13, 36], hideList: [27, 35] }" :mode="mode" :nullable-select="true" ref="suggestComponent" placeholder="Search information..." value-attribute="id" display-attribute="text" @select="onSuggestSelect"> <div class="g"> <input type="text"> </div> <template slot="misc-item-above" slot-scope="{ suggestions, query }"> <div class="misc-item"> <span>You're searching for '{{ "\{\{ query \}\}" }}'.</span> </div> <template v-if="suggestions.length > 0"> <div class="misc-item"> <span>{{ "\{\{ suggestions.length \}\}" }} suggestions are shown...</span> </div> <hr> </template> <div class="misc-item" v-else-if="!loading"> <span>No results</span> </div> </template> <div slot="suggestion-item" slot-scope="scope" :title="scope.suggestion.description"> <div class="text"> <span v-html="boldenSuggestion(scope)"></span> </div> </div> <div class="misc-item" slot="misc-item-below" slot-scope="{ suggestions }" v-if="loading"> <span>Loading...</span> </div> </vue-simple-suggest> <p class="mt-3">Selected element ({{ "\{\{ typeof selected \}\}" }}): <pre class="selected hljs"><span v-html="selected"></span></pre></p> </template> <script> export default { data() { return { model: null, } }, methods: { getList (inputValue) { return new Promise((resolve, reject) => { let url = `https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&namespace=*&search=${inputValue}&limit=10&namespace=0&format=json` fetch(url).then(response => { if (!response.ok) { reject() } response.json().then(json => { json.shift(); let result = [] const fields = ['text', 'description', 'link'] json.forEach((part, i) => { part.forEach((el, j) => { if (!result[j]) { result.push({ id: j+1 }) } result[j][fields[i]] = el }) }) resolve(result) // resolve([...(json.items || [])]) }).catch(e => { reject(e) }) }).catch(error => { this.loading = false reject(error) }) }) }, onSuggestSelect (suggest) { this.selected = suggest }, boldenSuggestion(scope) { if (!scope) return scope; const { suggestion, query } = scope; let result = this.$refs.suggestComponent.displayProperty(suggestion); if (!query) return result; const texts = query.split(/[\s-_/\\|.]/gm).filter(t => !!t) || ['']; return result.replace(new RegExp('(.*?)(' + texts.join('|') + ')(.*?)','gi'), '$1<b>$2</b>$3'); }, } } </script>
Determines the event, that triggers v-model
. Can be one of 'input'
(default) or 'select'
.
For example, if 'input'
is chosen - then v-model will update the value each time an input
event is fired, setting the input's string.
Same is for 'select'
- v-model changes only when something is selected from the list, setting the selected value (string, object or whatever) to its argument.
A proper use-case for it being when one wants to use the component only for selection binding and custom input for text binding: