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