Chosen element: \"+_vm._s(_vm.chosen)+\"
\\nSelected element (\"+_vm._s(\"\\{\\{ typeof selected \\}\\}\")+\"):
\\n
Chosen element: {{ chosen }}
\n\n \n<template>\n <vue-simple-suggest\n v-model="chosen"\n :list="simpleSuggestionList"\n :filter-by-query="true">\n <!-- Filter by input text to only show the matching results -->\n </vue-simple-suggest>\n\n <p class="mt-4">Chosen element: {{ chosen }}</p>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n chosen: '',\n }\n },\n methods: {\n simpleSuggestionList() {\n return [\n 'Vue.js',\n 'React.js',\n 'Angular.js'\n ]\n },\n }\n}\n</script>\n\n<style lang="scss">\n@import "@/assets/scss/vuexy/extraComponents/autocomplete.scss";\n</style>\n \nSelected element ({{ typeof selected }}):
\n\n \n<template>\n <vue-simple-suggest\n pattern="\\w+"\n v-model="model"\n :list="getList"\n :max-suggestions="10"\n :min-length="3"\n :debounce="200"\n :filter-by-query="false"\n :prevent-submit="true"\n :controls="{\n selectionUp: [38, 33],\n selectionDown: [40, 34],\n select: [13, 36],\n hideList: [27, 35]\n }"\n :mode="mode"\n :nullable-select="true"\n ref="suggestComponent"\n placeholder="Search information..."\n value-attribute="id"\n display-attribute="text"\n @select="onSuggestSelect">\n\n <div class="g">\n <input type="text">\n </div>\n\n <template slot="misc-item-above" slot-scope="{ suggestions, query }">\n <div class="misc-item">\n <span>You're searching for '{{ \"\\{\\{ query \\}\\}\" }}'.</span>\n </div>\n\n <template v-if="suggestions.length > 0">\n <div class="misc-item">\n <span>{{ \"\\{\\{ suggestions.length \\}\\}\" }} suggestions are shown...</span>\n </div>\n <hr>\n </template>\n\n <div class="misc-item" v-else-if="!loading">\n <span>No results</span>\n </div>\n </template>\n\n <div slot="suggestion-item" slot-scope="scope" :title="scope.suggestion.description">\n <div class="text">\n <span v-html="boldenSuggestion(scope)"></span>\n </div>\n </div>\n\n <div class="misc-item" slot="misc-item-below" slot-scope="{ suggestions }" v-if="loading">\n <span>Loading...</span>\n </div>\n </vue-simple-suggest>\n\n <p class="mt-3">Selected element ({{ \"\\{\\{ typeof selected \\}\\}\" }}): <pre class="selected hljs"><span v-html="selected"></span></pre></p>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n model: null,\n }\n },\n methods: {\n getList (inputValue) {\n return new Promise((resolve, reject) => {\n let url = `https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&namespace=*&search=${inputValue}&limit=10&namespace=0&format=json`\n fetch(url).then(response => {\n if (!response.ok) {\n reject()\n }\n response.json().then(json => {\n json.shift();\n let result = []\n const fields = ['text', 'description', 'link']\n json.forEach((part, i) => {\n part.forEach((el, j) => {\n if (!result[j]) {\n result.push({\n id: j+1\n })\n }\n result[j][fields[i]] = el\n })\n })\n resolve(result)\n // resolve([...(json.items || [])])\n }).catch(e => {\n reject(e)\n })\n }).catch(error => {\n this.loading = false\n reject(error)\n })\n })\n },\n onSuggestSelect (suggest) {\n this.selected = suggest\n },\n boldenSuggestion(scope) {\n if (!scope) return scope;\n const { suggestion, query } = scope;\n let result = this.$refs.suggestComponent.displayProperty(suggestion);\n if (!query) return result;\n const texts = query.split(/[\\s-_/\\\\|.]/gm).filter(t => !!t) || [''];\n return result.replace(new RegExp('(.*?)(' + texts.join('|') + ')(.*?)','gi'), '$1<b>$2</b>$3');\n },\n }\n}\n</script>\n \n
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:
\n\n