├── .gitignore
├── LICENSE
├── README.md
├── build
    └── rollup.config.js
├── dist
    ├── vue-dynamic-select.esm.js
    ├── vue-dynamic-select.min.js
    └── vue-dynamic-select.umd.js
├── package.json
└── src
    ├── DynamicSelect.vue
    ├── images
        └── dynamic-select.png
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Silas Montgomery
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-dynamic-select
 2 | A VueJS plugin that provides a searchable and reactive select list component with no dependencies.
 3 | 
 4 | ![alt text](https://raw.githubusercontent.com/silasmontgomery/vue-dynamic-select/master/src/images/dynamic-select.png "vue-dynamic-select screenshot")
 5 | 
 6 | [View Online Demos Here](http://demos.reticent.net/vue-dynamic-select)
 7 | 
 8 | ### Installation
 9 | ```
10 | npm install vue-dynamic-select --save
11 | ```
12 | 
13 | ### Import
14 | ```javascript
15 | import DynamicSelect from 'vue-dynamic-select'
16 | 
17 | Vue.use(DynamicSelect)
18 | ```
19 | 
20 | ### Usage
21 | ```javascript
22 | // Static options source (array)
23 | <dynamic-select 
24 |     :options="objectArray"
25 |     option-value="id"
26 |     option-text="name"
27 |     placeholder="type to search"
28 |     v-model="selectedObject" />
29 | 
30 | // Dynamic options source (ajax, etc)
31 | <dynamic-select 
32 |     :options="objectArray"
33 |     @search="onSearchEventHandler"
34 |     option-value="id"
35 |     option-text="name"
36 |     placeholder="type to search"
37 |     v-model="selectedObject" />
38 | ```
39 | 
40 | NOTE: For more detailed usage see the examples folder.
41 | 
42 | ### Properties
43 | | Name         | Type   | Default | Description                         |
44 | | ------------ | ------ | ------- | ------------------------------------------------------------------- |
45 | | options      | Array  | [ ]     | Array of objects that will create the select list options           |
46 | | option-value | String | id      | The object property used for the value of the select options        |
47 | | option-text  | String | name    | The object property used for the display text of the select options |
48 | | v-model      | Object | null    | Object containing the the selected object                           |
49 | | placeholder  | String | search  | String containing the text to be used as a placeholder              |
50 | 
51 | ### Events
52 | | Name   | Description                                                                 |
53 | | ------ | --------------------------------------------------------------------------- |
54 | | search | Triggered whenever search text changes. Value is the current search string. |
55 | | input  | Triggered whenever an option is selected.                                   |
56 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
 2 | import buble from 'rollup-plugin-buble'; // Transpile/polyfill with reasonable browser support
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | 
 5 | export default {
 6 |     input: 'src/index.js', // Path relative to package.json
 7 |     output: {
 8 |         name: 'DynamicSelect',
 9 |         exports: 'named',
10 |     },
11 |     plugins: [
12 |         vue({
13 |             css: true, // Dynamically inject css as a <style> tag
14 |             compileTemplate: true, // Explicitly convert template to render function
15 |         }),
16 |         buble(),
17 |         commonjs()
18 |     ],
19 | };


--------------------------------------------------------------------------------
/dist/vue-dynamic-select.esm.js:
--------------------------------------------------------------------------------
  1 | //
  2 | //
  3 | //
  4 | //
  5 | //
  6 | //
  7 | //
  8 | //
  9 | //
 10 | //
 11 | //
 12 | //
 13 | //
 14 | //
 15 | 
 16 | var script = {
 17 |     props: {
 18 |         placeholder: {
 19 |             type: String, 
 20 |             default: 'search',
 21 |             required: false
 22 |         },
 23 |         options: {
 24 |             type: Array, 
 25 |             default: function() {
 26 |                 return []
 27 |             },
 28 |             required: true
 29 |         },
 30 |         optionValue: {
 31 |             type: String, 
 32 |             default: 'id',
 33 |             required: true
 34 |         },
 35 |         optionText: {
 36 |             type: String, 
 37 |             default: 'name',
 38 |             required: true
 39 |         },
 40 |         value: {
 41 |             type: Object,
 42 |             default: function() {
 43 |                 return null
 44 |             },
 45 |             required: false
 46 |         }
 47 |     },
 48 |     data: function() {
 49 |         return {
 50 |             hasFocus: false,
 51 |             search: null,
 52 |             selectedOption: this.value,
 53 |             selectedResult: 0
 54 |         };
 55 |     },
 56 |     mounted: function mounted() {
 57 |         // Add onclick method to body to hide result list when component loses focus
 58 |         window.addEventListener("click", this.loseFocus);
 59 |     },
 60 |     destroyed: function destroyed() {
 61 |         window.removeEventListener("click", this.loseFocus);
 62 |     },
 63 |     computed: {
 64 |         results: function() {
 65 |             var this$1 = this;
 66 | 
 67 |             // Filter items on search text (if not empty, case insensitive) and when item isn't already selected (else return all items not selected)
 68 |             return this.search ? this.options.filter(function (i) { return String(i[this$1.optionText]).toLowerCase().indexOf(this$1.search.toLowerCase()) > -1; }) : this.options;
 69 |         },
 70 |         showResultList: function() {
 71 |             return this.hasFocus && this.results.length > 0;
 72 |         },
 73 |         showPlaceholder: function() {
 74 |             return !this.hasFocus && !this.selectedOption;
 75 |         }
 76 |     },
 77 |     watch: {
 78 |         hasFocus: function(hasFocus) {
 79 |             // Clear the search box when component loses focus
 80 |             window.removeEventListener("keydown", this.stopScroll);
 81 |             if(hasFocus) {
 82 |                 window.addEventListener("keydown", this.stopScroll);
 83 |                 this.$refs.search.focus();
 84 |             } else {
 85 |                 this.search = null;
 86 |                 this.selectedResult = 0;
 87 |                 this.$refs.search.blur();
 88 |             }
 89 |         },
 90 |         value: function() {
 91 |             var this$1 = this;
 92 | 
 93 |             // Load selected option on prop value change
 94 |             this.selectedOption = this.options.find( function (option) {
 95 |                 return this$1.value && option[this$1.optionValue] == this$1.value[this$1.optionValue];
 96 |             });
 97 |         },
 98 |         selectedOption: function() {
 99 |             // Provide selected item to parent
100 |             this.$emit('input', this.selectedOption);
101 |         },
102 |         search: function() {
103 |             // Provide search text to parent (for ajax fetching, etc)
104 |             this.$emit('search', this.search);
105 |         }
106 |     },
107 |     methods: {
108 |         selectOption: function(option) {
109 |             this.selectedOption = option;
110 |             this.hasFocus = false;
111 |         },
112 |         removeOption: function(event) {
113 |             // Remove selected option if user hits backspace on empty search field
114 |             if(event.keyCode === 8 && (this.search == null || this.search == '')) {
115 |                 this.selectedOption = null;
116 |                 this.hasFocus = false;
117 |                 event.preventDefault();
118 |             }
119 |         },
120 |         moveToResults: function(event) {
121 |             // Move down to first result if user presses down arrow (from search field)
122 |             if(event.keyCode === 40) {
123 |                 if(this.$refs.result.length > 0) {
124 |                     this.$refs.resultList.children.item(0).focus();
125 |                 }
126 |             }
127 |         },
128 |         navigateResults: function(option, event) {
129 |             // Add option to selected items on enter key
130 |             if(event.keyCode === 13) {
131 |                 this.selectOption(option);
132 |             // Move up or down items in result list with up or down arrow keys
133 |             } else if(event.keyCode === 40 || event.keyCode === 38) {
134 |                 if(event.keyCode === 40) {
135 |                     this.selectedResult++;
136 |                 } else if(event.keyCode === 38) {
137 |                     this.selectedResult--;
138 |                 }
139 |                 var next = this.$refs.resultList.children.item(this.selectedResult);
140 |                 if(next) {
141 |                     next.focus();
142 |                 } else {
143 |                     this.selectedResult = 0;
144 |                     this.$refs.search.focus();
145 |                 }
146 |             }
147 |         },
148 |         highlight: function(value) {
149 |             // Highlights the part of each result that matches the search text
150 |             if(this.search) {
151 |                 var matchPos = String(value).toLowerCase().indexOf(this.search.toLowerCase());
152 |                 if(matchPos > -1) {
153 |                     var matchStr = String(value).substr(matchPos, this.search.length);
154 |                     value = String(value).replace(matchStr, '<span style="font-weight: bold; background-color: #efefef;">'+matchStr+'</span>');
155 |                 }
156 |             }
157 | 
158 |             return value;
159 |         },
160 |         stopScroll: function(event) {
161 |             if(event.keyCode === 40 || event.keyCode === 38) {
162 |                 event.preventDefault();
163 |             }
164 |         },
165 |         loseFocus: function(event) {
166 |             if(!this.$el.contains(event.target)) {
167 |                 this.hasFocus = false;
168 |             }
169 |         }
170 |     }
171 | }
172 | 
173 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
174 | /* server only */
175 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
176 |   if (typeof shadowMode !== 'boolean') {
177 |     createInjectorSSR = createInjector;
178 |     createInjector = shadowMode;
179 |     shadowMode = false;
180 |   } // Vue.extend constructor export interop.
181 | 
182 | 
183 |   var options = typeof script === 'function' ? script.options : script; // render functions
184 | 
185 |   if (template && template.render) {
186 |     options.render = template.render;
187 |     options.staticRenderFns = template.staticRenderFns;
188 |     options._compiled = true; // functional template
189 | 
190 |     if (isFunctionalTemplate) {
191 |       options.functional = true;
192 |     }
193 |   } // scopedId
194 | 
195 | 
196 |   if (scopeId) {
197 |     options._scopeId = scopeId;
198 |   }
199 | 
200 |   var hook;
201 | 
202 |   if (moduleIdentifier) {
203 |     // server build
204 |     hook = function hook(context) {
205 |       // 2.3 injection
206 |       context = context || // cached call
207 |       this.$vnode && this.$vnode.ssrContext || // stateful
208 |       this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
209 |       // 2.2 with runInNewContext: true
210 | 
211 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
212 |         context = __VUE_SSR_CONTEXT__;
213 |       } // inject component styles
214 | 
215 | 
216 |       if (style) {
217 |         style.call(this, createInjectorSSR(context));
218 |       } // register component module identifier for async chunk inference
219 | 
220 | 
221 |       if (context && context._registeredComponents) {
222 |         context._registeredComponents.add(moduleIdentifier);
223 |       }
224 |     }; // used by ssr in case component is cached and beforeCreate
225 |     // never gets called
226 | 
227 | 
228 |     options._ssrRegister = hook;
229 |   } else if (style) {
230 |     hook = shadowMode ? function () {
231 |       style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
232 |     } : function (context) {
233 |       style.call(this, createInjector(context));
234 |     };
235 |   }
236 | 
237 |   if (hook) {
238 |     if (options.functional) {
239 |       // register for functional component in vue file
240 |       var originalRender = options.render;
241 | 
242 |       options.render = function renderWithStyleInjection(h, context) {
243 |         hook.call(context);
244 |         return originalRender(h, context);
245 |       };
246 |     } else {
247 |       // inject component registration as beforeCreate hook
248 |       var existing = options.beforeCreate;
249 |       options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
250 |     }
251 |   }
252 | 
253 |   return script;
254 | }
255 | 
256 | var normalizeComponent_1 = normalizeComponent;
257 | 
258 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
259 | function createInjector(context) {
260 |   return function (id, style) {
261 |     return addStyle(id, style);
262 |   };
263 | }
264 | var HEAD = document.head || document.getElementsByTagName('head')[0];
265 | var styles = {};
266 | 
267 | function addStyle(id, css) {
268 |   var group = isOldIE ? css.media || 'default' : id;
269 |   var style = styles[group] || (styles[group] = {
270 |     ids: new Set(),
271 |     styles: []
272 |   });
273 | 
274 |   if (!style.ids.has(id)) {
275 |     style.ids.add(id);
276 |     var code = css.source;
277 | 
278 |     if (css.map) {
279 |       // https://developer.chrome.com/devtools/docs/javascript-debugging
280 |       // this makes source maps inside style tags work properly in Chrome
281 |       code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
282 | 
283 |       code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
284 |     }
285 | 
286 |     if (!style.element) {
287 |       style.element = document.createElement('style');
288 |       style.element.type = 'text/css';
289 |       if (css.media) { style.element.setAttribute('media', css.media); }
290 |       HEAD.appendChild(style.element);
291 |     }
292 | 
293 |     if ('styleSheet' in style.element) {
294 |       style.styles.push(code);
295 |       style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
296 |     } else {
297 |       var index = style.ids.size - 1;
298 |       var textNode = document.createTextNode(code);
299 |       var nodes = style.element.childNodes;
300 |       if (nodes[index]) { style.element.removeChild(nodes[index]); }
301 |       if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); }
302 |     }
303 |   }
304 | }
305 | 
306 | var browser = createInjector;
307 | 
308 | /* script */
309 | var __vue_script__ = script;
310 | 
311 | /* template */
312 | var __vue_render__ = function() {
313 |   var _vm = this;
314 |   var _h = _vm.$createElement;
315 |   var _c = _vm._self._c || _h;
316 |   return _c("div", [
317 |     _c(
318 |       "div",
319 |       {
320 |         staticClass: "vue-dynamic-select",
321 |         attrs: { tabindex: "0" },
322 |         on: {
323 |           focusin: function($event) {
324 |             _vm.hasFocus = true;
325 |           }
326 |         }
327 |       },
328 |       [
329 |         _vm.showPlaceholder
330 |           ? _c("div", {
331 |               staticClass: "placeholder",
332 |               domProps: { textContent: _vm._s(_vm.placeholder) }
333 |             })
334 |           : _vm._e(),
335 |         _vm._v(" "),
336 |         _vm.selectedOption && !_vm.hasFocus
337 |           ? _c("div", {
338 |               staticClass: "selected-option",
339 |               domProps: {
340 |                 textContent: _vm._s(_vm.selectedOption[_vm.optionText])
341 |               }
342 |             })
343 |           : _vm._e(),
344 |         _vm._v(" "),
345 |         _c("input", {
346 |           directives: [
347 |             {
348 |               name: "model",
349 |               rawName: "v-model",
350 |               value: _vm.search,
351 |               expression: "search"
352 |             }
353 |           ],
354 |           ref: "search",
355 |           staticClass: "search",
356 |           attrs: { autocomplete: "off" },
357 |           domProps: { value: _vm.search },
358 |           on: {
359 |             focus: function($event) {
360 |               _vm.hasFocus = true;
361 |             },
362 |             keyup: _vm.moveToResults,
363 |             keydown: _vm.removeOption,
364 |             input: function($event) {
365 |               if ($event.target.composing) {
366 |                 return
367 |               }
368 |               _vm.search = $event.target.value;
369 |             }
370 |           }
371 |         }),
372 |         _vm._v(" "),
373 |         _c("i", { staticClass: "dropdown" }),
374 |         _vm._v(" "),
375 |         _vm.showResultList
376 |           ? _c(
377 |               "div",
378 |               { ref: "resultList", staticClass: "result-list" },
379 |               _vm._l(_vm.results, function(result) {
380 |                 return _c("div", {
381 |                   key: result[_vm.optionValue],
382 |                   ref: "result",
383 |                   refInFor: true,
384 |                   staticClass: "result",
385 |                   attrs: { tabindex: "0" },
386 |                   domProps: {
387 |                     innerHTML: _vm._s(_vm.highlight(result[_vm.optionText]))
388 |                   },
389 |                   on: {
390 |                     click: function($event) {
391 |                       return _vm.selectOption(result)
392 |                     },
393 |                     keyup: function($event) {
394 |                       $event.preventDefault();
395 |                       return _vm.navigateResults(result, $event)
396 |                     }
397 |                   }
398 |                 })
399 |               }),
400 |               0
401 |             )
402 |           : _vm._e()
403 |       ]
404 |     )
405 |   ])
406 | };
407 | var __vue_staticRenderFns__ = [];
408 | __vue_render__._withStripped = true;
409 | 
410 |   /* style */
411 |   var __vue_inject_styles__ = function (inject) {
412 |     if (!inject) { return }
413 |     inject("data-v-24d1f392_0", { source: "\n.vue-dynamic-select[data-v-24d1f392] {\n    border: 1px solid #ced4da; \n    position: relative;\n    padding: .375em .5em;\n    border-radius: .25em;\n    cursor: text;\n    display: block;\n}\n.vue-dynamic-select i.dropdown[data-v-24d1f392] {\n    width: 0; \n    height: 0; \n    border-left: 4px solid transparent; \n    border-right: 4px solid transparent; \n    border-top: 4px solid; \n    float: right; \n    top: .75em; \n    opacity: .8; \n    cursor: pointer;\n}\n.vue-dynamic-select .placeholder[data-v-24d1f392] {\n    display: inline-block;\n    color: #ccc;\n}\n.vue-dynamic-select .result-list[data-v-24d1f392] {\n    border: 1px solid #ced4da; \n    margin: calc(.375em - 1px) calc(-.5em - 1px);\n    width: calc(100% + 2px);\n    min-width: calc(100% + 2px);\n    border-radius: 0 0 .25em .25em;\n    cursor: pointer;\n    position: absolute;\n    z-index: 10;\n    background-color: #fff;\n}\n.vue-dynamic-select .result-list .result[data-v-24d1f392] {\n    padding: .375em .75em;\n    color: #333;\n}\n.vue-dynamic-select .result-list .result[data-v-24d1f392]:hover, .vue-dynamic-select .result-list .result[data-v-24d1f392]:focus {\n    background-color: #efefef;\n    outline: none;\n}\n.vue-dynamic-select .selected-option[data-v-24d1f392] {\n    display: inline-block;\n}\n.vue-dynamic-select .search[data-v-24d1f392] {\n    border: none;\n    width: 50px;\n}\n.vue-dynamic-select .search[data-v-24d1f392]:focus {\n    outline: none;\n}\n", map: {"version":3,"sources":["/home/smontgomery/Projects/vue-dynamic-select/src/DynamicSelect.vue"],"names":[],"mappings":";AA0KA;IACA,yBAAA;IACA,kBAAA;IACA,oBAAA;IACA,oBAAA;IACA,YAAA;IACA,cAAA;AACA;AACA;IACA,QAAA;IACA,SAAA;IACA,kCAAA;IACA,mCAAA;IACA,qBAAA;IACA,YAAA;IACA,UAAA;IACA,WAAA;IACA,eAAA;AACA;AACA;IACA,qBAAA;IACA,WAAA;AACA;AACA;IACA,yBAAA;IACA,4CAAA;IACA,uBAAA;IACA,2BAAA;IACA,8BAAA;IACA,eAAA;IACA,kBAAA;IACA,WAAA;IACA,sBAAA;AACA;AACA;IACA,qBAAA;IACA,WAAA;AACA;AACA;IACA,yBAAA;IACA,aAAA;AACA;AACA;IACA,qBAAA;AACA;AACA;IACA,YAAA;IACA,WAAA;AACA;AACA;IACA,aAAA;AACA","file":"DynamicSelect.vue","sourcesContent":["<template>\n    <div>\n        <div tabindex=\"0\" @focusin=\"hasFocus=true\" class=\"vue-dynamic-select\">\n            <div v-if=\"showPlaceholder\" class=\"placeholder\" v-text=\"placeholder\"></div>\n            <div class=\"selected-option\" v-text=\"selectedOption[optionText]\" v-if=\"selectedOption && !hasFocus\" />\n            <input @focus=\"hasFocus=true\" autocomplete=\"off\" class=\"search\" ref=\"search\" v-model=\"search\" @keyup=\"moveToResults\" @keydown=\"removeOption\" />\n            <i class=\"dropdown\" />\n            <div v-if=\"showResultList\" ref=\"resultList\" class=\"result-list\">\n                <div tabindex=\"0\" ref=\"result\" class=\"result\" v-for=\"result in results\" :key=\"result[optionValue]\" v-html=\"highlight(result[optionText])\" @click=\"selectOption(result)\" @keyup.prevent=\"navigateResults(result, $event)\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        props: {\n            placeholder: {\n                type: String, \n                default: 'search',\n                required: false\n            },\n            options: {\n                type: Array, \n                default: function() {\n                    return []\n                },\n                required: true\n            },\n            optionValue: {\n                type: String, \n                default: 'id',\n                required: true\n            },\n            optionText: {\n                type: String, \n                default: 'name',\n                required: true\n            },\n            value: {\n                type: Object,\n                default: function() {\n                    return null\n                },\n                required: false\n            }\n        },\n        data: function() {\n            return {\n                hasFocus: false,\n                search: null,\n                selectedOption: this.value,\n                selectedResult: 0\n            };\n        },\n        mounted() {\n            // Add onclick method to body to hide result list when component loses focus\n            window.addEventListener(\"click\", this.loseFocus)\n        },\n        destroyed() {\n            window.removeEventListener(\"click\", this.loseFocus)\n        },\n        computed: {\n            results: function() {\n                // Filter items on search text (if not empty, case insensitive) and when item isn't already selected (else return all items not selected)\n                return this.search ? this.options.filter(i => String(i[this.optionText]).toLowerCase().indexOf(this.search.toLowerCase()) > -1) : this.options;\n            },\n            showResultList: function() {\n                return this.hasFocus && this.results.length > 0;\n            },\n            showPlaceholder: function() {\n                return !this.hasFocus && !this.selectedOption;\n            }\n        },\n        watch: {\n            hasFocus: function(hasFocus) {\n                // Clear the search box when component loses focus\n                window.removeEventListener(\"keydown\", this.stopScroll);\n                if(hasFocus) {\n                    window.addEventListener(\"keydown\", this.stopScroll);\n                    this.$refs.search.focus();\n                } else {\n                    this.search = null;\n                    this.selectedResult = 0;\n                    this.$refs.search.blur();\n                }\n            },\n            value: function() {\n                // Load selected option on prop value change\n                this.selectedOption = this.options.find( option => {\n                    return this.value && option[this.optionValue] == this.value[this.optionValue];\n                })\n            },\n            selectedOption: function() {\n                // Provide selected item to parent\n                this.$emit('input', this.selectedOption);\n            },\n            search: function() {\n                // Provide search text to parent (for ajax fetching, etc)\n                this.$emit('search', this.search);\n            }\n        },\n        methods: {\n            selectOption: function(option) {\n                this.selectedOption = option;\n                this.hasFocus = false;\n            },\n            removeOption: function(event) {\n                // Remove selected option if user hits backspace on empty search field\n                if(event.keyCode === 8 && (this.search == null || this.search == '')) {\n                    this.selectedOption = null;\n                    this.hasFocus = false;\n                    event.preventDefault();\n                }\n            },\n            moveToResults: function(event) {\n                // Move down to first result if user presses down arrow (from search field)\n                if(event.keyCode === 40) {\n                    if(this.$refs.result.length > 0) {\n                        this.$refs.resultList.children.item(0).focus();\n                    }\n                }\n            },\n            navigateResults: function(option, event) {\n                // Add option to selected items on enter key\n                if(event.keyCode === 13) {\n                    this.selectOption(option);\n                // Move up or down items in result list with up or down arrow keys\n                } else if(event.keyCode === 40 || event.keyCode === 38) {\n                    if(event.keyCode === 40) {\n                        this.selectedResult++;\n                    } else if(event.keyCode === 38) {\n                        this.selectedResult--;\n                    }\n                    let next = this.$refs.resultList.children.item(this.selectedResult);\n                    if(next) {\n                        next.focus();\n                    } else {\n                        this.selectedResult = 0;\n                        this.$refs.search.focus();\n                    }\n                }\n            },\n            highlight: function(value) {\n                // Highlights the part of each result that matches the search text\n                if(this.search) {\n                    let matchPos = String(value).toLowerCase().indexOf(this.search.toLowerCase());\n                    if(matchPos > -1) {\n                        let matchStr = String(value).substr(matchPos, this.search.length);\n                        value = String(value).replace(matchStr, '<span style=\"font-weight: bold; background-color: #efefef;\">'+matchStr+'</span>');\n                    }\n                }\n\n                return value;\n            },\n            stopScroll: function(event) {\n                if(event.keyCode === 40 || event.keyCode === 38) {\n                    event.preventDefault();\n                }\n            },\n            loseFocus: function(event) {\n                if(!this.$el.contains(event.target)) {\n                    this.hasFocus = false;\n                }\n            }\n        }\n    }\n</script>\n\n<style scoped>\n    .vue-dynamic-select {\n        border: 1px solid #ced4da; \n        position: relative;\n        padding: .375em .5em;\n        border-radius: .25em;\n        cursor: text;\n        display: block;\n    }\n    .vue-dynamic-select i.dropdown {\n        width: 0; \n        height: 0; \n        border-left: 4px solid transparent; \n        border-right: 4px solid transparent; \n        border-top: 4px solid; \n        float: right; \n        top: .75em; \n        opacity: .8; \n        cursor: pointer;\n    }\n    .vue-dynamic-select .placeholder {\n        display: inline-block;\n        color: #ccc;\n    }\n    .vue-dynamic-select .result-list {\n        border: 1px solid #ced4da; \n        margin: calc(.375em - 1px) calc(-.5em - 1px);\n        width: calc(100% + 2px);\n        min-width: calc(100% + 2px);\n        border-radius: 0 0 .25em .25em;\n        cursor: pointer;\n        position: absolute;\n        z-index: 10;\n        background-color: #fff;\n    }\n    .vue-dynamic-select .result-list .result {\n        padding: .375em .75em;\n        color: #333;\n    }\n    .vue-dynamic-select .result-list .result:hover, .vue-dynamic-select .result-list .result:focus {\n        background-color: #efefef;\n        outline: none;\n    }\n    .vue-dynamic-select .selected-option {\n        display: inline-block;\n    }\n    .vue-dynamic-select .search {\n        border: none;\n        width: 50px;\n    }\n    .vue-dynamic-select .search:focus {\n        outline: none;\n    }\n</style>\n"]}, media: undefined });
414 | 
415 |   };
416 |   /* scoped */
417 |   var __vue_scope_id__ = "data-v-24d1f392";
418 |   /* module identifier */
419 |   var __vue_module_identifier__ = undefined;
420 |   /* functional template */
421 |   var __vue_is_functional_template__ = false;
422 |   /* style inject SSR */
423 |   
424 | 
425 |   
426 |   var DynamicSelect = normalizeComponent_1(
427 |     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
428 |     __vue_inject_styles__,
429 |     __vue_script__,
430 |     __vue_scope_id__,
431 |     __vue_is_functional_template__,
432 |     __vue_module_identifier__,
433 |     browser,
434 |     undefined
435 |   )
436 | 
437 | // Declare install function executed by Vue.use()
438 | function install(Vue) {
439 | 	if (install.installed) { return; }
440 | 	install.installed = true;
441 | 	Vue.component('DynamicSelect', DynamicSelect);
442 | }
443 | 
444 | // Create module definition for Vue.use()
445 | var plugin = {
446 | 	install: install,
447 | };
448 | 
449 | // Auto-install when vue is found (eg. in browser via <script> tag)
450 | var GlobalVue = null;
451 | if (typeof window !== 'undefined') {
452 | 	GlobalVue = window.Vue;
453 | } else if (typeof global !== 'undefined') {
454 | 	GlobalVue = global.Vue;
455 | }
456 | if (GlobalVue) {
457 | 	GlobalVue.use(plugin);
458 | }
459 | 
460 | export default DynamicSelect;
461 | export { install };
462 | 


--------------------------------------------------------------------------------
/dist/vue-dynamic-select.min.js:
--------------------------------------------------------------------------------
  1 | var DynamicSelect = (function (exports) {
  2 |     'use strict';
  3 | 
  4 |     //
  5 |     //
  6 |     //
  7 |     //
  8 |     //
  9 |     //
 10 |     //
 11 |     //
 12 |     //
 13 |     //
 14 |     //
 15 |     //
 16 |     //
 17 |     //
 18 | 
 19 |     var script = {
 20 |         props: {
 21 |             placeholder: {
 22 |                 type: String, 
 23 |                 default: 'search',
 24 |                 required: false
 25 |             },
 26 |             options: {
 27 |                 type: Array, 
 28 |                 default: function() {
 29 |                     return []
 30 |                 },
 31 |                 required: true
 32 |             },
 33 |             optionValue: {
 34 |                 type: String, 
 35 |                 default: 'id',
 36 |                 required: true
 37 |             },
 38 |             optionText: {
 39 |                 type: String, 
 40 |                 default: 'name',
 41 |                 required: true
 42 |             },
 43 |             value: {
 44 |                 type: Object,
 45 |                 default: function() {
 46 |                     return null
 47 |                 },
 48 |                 required: false
 49 |             }
 50 |         },
 51 |         data: function() {
 52 |             return {
 53 |                 hasFocus: false,
 54 |                 search: null,
 55 |                 selectedOption: this.value,
 56 |                 selectedResult: 0
 57 |             };
 58 |         },
 59 |         mounted: function mounted() {
 60 |             // Add onclick method to body to hide result list when component loses focus
 61 |             window.addEventListener("click", this.loseFocus);
 62 |         },
 63 |         destroyed: function destroyed() {
 64 |             window.removeEventListener("click", this.loseFocus);
 65 |         },
 66 |         computed: {
 67 |             results: function() {
 68 |                 var this$1 = this;
 69 | 
 70 |                 // Filter items on search text (if not empty, case insensitive) and when item isn't already selected (else return all items not selected)
 71 |                 return this.search ? this.options.filter(function (i) { return String(i[this$1.optionText]).toLowerCase().indexOf(this$1.search.toLowerCase()) > -1; }) : this.options;
 72 |             },
 73 |             showResultList: function() {
 74 |                 return this.hasFocus && this.results.length > 0;
 75 |             },
 76 |             showPlaceholder: function() {
 77 |                 return !this.hasFocus && !this.selectedOption;
 78 |             }
 79 |         },
 80 |         watch: {
 81 |             hasFocus: function(hasFocus) {
 82 |                 // Clear the search box when component loses focus
 83 |                 window.removeEventListener("keydown", this.stopScroll);
 84 |                 if(hasFocus) {
 85 |                     window.addEventListener("keydown", this.stopScroll);
 86 |                     this.$refs.search.focus();
 87 |                 } else {
 88 |                     this.search = null;
 89 |                     this.selectedResult = 0;
 90 |                     this.$refs.search.blur();
 91 |                 }
 92 |             },
 93 |             value: function() {
 94 |                 var this$1 = this;
 95 | 
 96 |                 // Load selected option on prop value change
 97 |                 this.selectedOption = this.options.find( function (option) {
 98 |                     return this$1.value && option[this$1.optionValue] == this$1.value[this$1.optionValue];
 99 |                 });
100 |             },
101 |             selectedOption: function() {
102 |                 // Provide selected item to parent
103 |                 this.$emit('input', this.selectedOption);
104 |             },
105 |             search: function() {
106 |                 // Provide search text to parent (for ajax fetching, etc)
107 |                 this.$emit('search', this.search);
108 |             }
109 |         },
110 |         methods: {
111 |             selectOption: function(option) {
112 |                 this.selectedOption = option;
113 |                 this.hasFocus = false;
114 |             },
115 |             removeOption: function(event) {
116 |                 // Remove selected option if user hits backspace on empty search field
117 |                 if(event.keyCode === 8 && (this.search == null || this.search == '')) {
118 |                     this.selectedOption = null;
119 |                     this.hasFocus = false;
120 |                     event.preventDefault();
121 |                 }
122 |             },
123 |             moveToResults: function(event) {
124 |                 // Move down to first result if user presses down arrow (from search field)
125 |                 if(event.keyCode === 40) {
126 |                     if(this.$refs.result.length > 0) {
127 |                         this.$refs.resultList.children.item(0).focus();
128 |                     }
129 |                 }
130 |             },
131 |             navigateResults: function(option, event) {
132 |                 // Add option to selected items on enter key
133 |                 if(event.keyCode === 13) {
134 |                     this.selectOption(option);
135 |                 // Move up or down items in result list with up or down arrow keys
136 |                 } else if(event.keyCode === 40 || event.keyCode === 38) {
137 |                     if(event.keyCode === 40) {
138 |                         this.selectedResult++;
139 |                     } else if(event.keyCode === 38) {
140 |                         this.selectedResult--;
141 |                     }
142 |                     var next = this.$refs.resultList.children.item(this.selectedResult);
143 |                     if(next) {
144 |                         next.focus();
145 |                     } else {
146 |                         this.selectedResult = 0;
147 |                         this.$refs.search.focus();
148 |                     }
149 |                 }
150 |             },
151 |             highlight: function(value) {
152 |                 // Highlights the part of each result that matches the search text
153 |                 if(this.search) {
154 |                     var matchPos = String(value).toLowerCase().indexOf(this.search.toLowerCase());
155 |                     if(matchPos > -1) {
156 |                         var matchStr = String(value).substr(matchPos, this.search.length);
157 |                         value = String(value).replace(matchStr, '<span style="font-weight: bold; background-color: #efefef;">'+matchStr+'</span>');
158 |                     }
159 |                 }
160 | 
161 |                 return value;
162 |             },
163 |             stopScroll: function(event) {
164 |                 if(event.keyCode === 40 || event.keyCode === 38) {
165 |                     event.preventDefault();
166 |                 }
167 |             },
168 |             loseFocus: function(event) {
169 |                 if(!this.$el.contains(event.target)) {
170 |                     this.hasFocus = false;
171 |                 }
172 |             }
173 |         }
174 |     }
175 | 
176 |     function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
177 |     /* server only */
178 |     , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
179 |       if (typeof shadowMode !== 'boolean') {
180 |         createInjectorSSR = createInjector;
181 |         createInjector = shadowMode;
182 |         shadowMode = false;
183 |       } // Vue.extend constructor export interop.
184 | 
185 | 
186 |       var options = typeof script === 'function' ? script.options : script; // render functions
187 | 
188 |       if (template && template.render) {
189 |         options.render = template.render;
190 |         options.staticRenderFns = template.staticRenderFns;
191 |         options._compiled = true; // functional template
192 | 
193 |         if (isFunctionalTemplate) {
194 |           options.functional = true;
195 |         }
196 |       } // scopedId
197 | 
198 | 
199 |       if (scopeId) {
200 |         options._scopeId = scopeId;
201 |       }
202 | 
203 |       var hook;
204 | 
205 |       if (moduleIdentifier) {
206 |         // server build
207 |         hook = function hook(context) {
208 |           // 2.3 injection
209 |           context = context || // cached call
210 |           this.$vnode && this.$vnode.ssrContext || // stateful
211 |           this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
212 |           // 2.2 with runInNewContext: true
213 | 
214 |           if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
215 |             context = __VUE_SSR_CONTEXT__;
216 |           } // inject component styles
217 | 
218 | 
219 |           if (style) {
220 |             style.call(this, createInjectorSSR(context));
221 |           } // register component module identifier for async chunk inference
222 | 
223 | 
224 |           if (context && context._registeredComponents) {
225 |             context._registeredComponents.add(moduleIdentifier);
226 |           }
227 |         }; // used by ssr in case component is cached and beforeCreate
228 |         // never gets called
229 | 
230 | 
231 |         options._ssrRegister = hook;
232 |       } else if (style) {
233 |         hook = shadowMode ? function () {
234 |           style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
235 |         } : function (context) {
236 |           style.call(this, createInjector(context));
237 |         };
238 |       }
239 | 
240 |       if (hook) {
241 |         if (options.functional) {
242 |           // register for functional component in vue file
243 |           var originalRender = options.render;
244 | 
245 |           options.render = function renderWithStyleInjection(h, context) {
246 |             hook.call(context);
247 |             return originalRender(h, context);
248 |           };
249 |         } else {
250 |           // inject component registration as beforeCreate hook
251 |           var existing = options.beforeCreate;
252 |           options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
253 |         }
254 |       }
255 | 
256 |       return script;
257 |     }
258 | 
259 |     var normalizeComponent_1 = normalizeComponent;
260 | 
261 |     var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
262 |     function createInjector(context) {
263 |       return function (id, style) {
264 |         return addStyle(id, style);
265 |       };
266 |     }
267 |     var HEAD = document.head || document.getElementsByTagName('head')[0];
268 |     var styles = {};
269 | 
270 |     function addStyle(id, css) {
271 |       var group = isOldIE ? css.media || 'default' : id;
272 |       var style = styles[group] || (styles[group] = {
273 |         ids: new Set(),
274 |         styles: []
275 |       });
276 | 
277 |       if (!style.ids.has(id)) {
278 |         style.ids.add(id);
279 |         var code = css.source;
280 | 
281 |         if (css.map) {
282 |           // https://developer.chrome.com/devtools/docs/javascript-debugging
283 |           // this makes source maps inside style tags work properly in Chrome
284 |           code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
285 | 
286 |           code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
287 |         }
288 | 
289 |         if (!style.element) {
290 |           style.element = document.createElement('style');
291 |           style.element.type = 'text/css';
292 |           if (css.media) { style.element.setAttribute('media', css.media); }
293 |           HEAD.appendChild(style.element);
294 |         }
295 | 
296 |         if ('styleSheet' in style.element) {
297 |           style.styles.push(code);
298 |           style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
299 |         } else {
300 |           var index = style.ids.size - 1;
301 |           var textNode = document.createTextNode(code);
302 |           var nodes = style.element.childNodes;
303 |           if (nodes[index]) { style.element.removeChild(nodes[index]); }
304 |           if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); }
305 |         }
306 |       }
307 |     }
308 | 
309 |     var browser = createInjector;
310 | 
311 |     /* script */
312 |     var __vue_script__ = script;
313 | 
314 |     /* template */
315 |     var __vue_render__ = function() {
316 |       var _vm = this;
317 |       var _h = _vm.$createElement;
318 |       var _c = _vm._self._c || _h;
319 |       return _c("div", [
320 |         _c(
321 |           "div",
322 |           {
323 |             staticClass: "vue-dynamic-select",
324 |             attrs: { tabindex: "0" },
325 |             on: {
326 |               focusin: function($event) {
327 |                 _vm.hasFocus = true;
328 |               }
329 |             }
330 |           },
331 |           [
332 |             _vm.showPlaceholder
333 |               ? _c("div", {
334 |                   staticClass: "placeholder",
335 |                   domProps: { textContent: _vm._s(_vm.placeholder) }
336 |                 })
337 |               : _vm._e(),
338 |             _vm._v(" "),
339 |             _vm.selectedOption && !_vm.hasFocus
340 |               ? _c("div", {
341 |                   staticClass: "selected-option",
342 |                   domProps: {
343 |                     textContent: _vm._s(_vm.selectedOption[_vm.optionText])
344 |                   }
345 |                 })
346 |               : _vm._e(),
347 |             _vm._v(" "),
348 |             _c("input", {
349 |               directives: [
350 |                 {
351 |                   name: "model",
352 |                   rawName: "v-model",
353 |                   value: _vm.search,
354 |                   expression: "search"
355 |                 }
356 |               ],
357 |               ref: "search",
358 |               staticClass: "search",
359 |               attrs: { autocomplete: "off" },
360 |               domProps: { value: _vm.search },
361 |               on: {
362 |                 focus: function($event) {
363 |                   _vm.hasFocus = true;
364 |                 },
365 |                 keyup: _vm.moveToResults,
366 |                 keydown: _vm.removeOption,
367 |                 input: function($event) {
368 |                   if ($event.target.composing) {
369 |                     return
370 |                   }
371 |                   _vm.search = $event.target.value;
372 |                 }
373 |               }
374 |             }),
375 |             _vm._v(" "),
376 |             _c("i", { staticClass: "dropdown" }),
377 |             _vm._v(" "),
378 |             _vm.showResultList
379 |               ? _c(
380 |                   "div",
381 |                   { ref: "resultList", staticClass: "result-list" },
382 |                   _vm._l(_vm.results, function(result) {
383 |                     return _c("div", {
384 |                       key: result[_vm.optionValue],
385 |                       ref: "result",
386 |                       refInFor: true,
387 |                       staticClass: "result",
388 |                       attrs: { tabindex: "0" },
389 |                       domProps: {
390 |                         innerHTML: _vm._s(_vm.highlight(result[_vm.optionText]))
391 |                       },
392 |                       on: {
393 |                         click: function($event) {
394 |                           return _vm.selectOption(result)
395 |                         },
396 |                         keyup: function($event) {
397 |                           $event.preventDefault();
398 |                           return _vm.navigateResults(result, $event)
399 |                         }
400 |                       }
401 |                     })
402 |                   }),
403 |                   0
404 |                 )
405 |               : _vm._e()
406 |           ]
407 |         )
408 |       ])
409 |     };
410 |     var __vue_staticRenderFns__ = [];
411 |     __vue_render__._withStripped = true;
412 | 
413 |       /* style */
414 |       var __vue_inject_styles__ = function (inject) {
415 |         if (!inject) { return }
416 |         inject("data-v-24d1f392_0", { source: "\n.vue-dynamic-select[data-v-24d1f392] {\n    border: 1px solid #ced4da; \n    position: relative;\n    padding: .375em .5em;\n    border-radius: .25em;\n    cursor: text;\n    display: block;\n}\n.vue-dynamic-select i.dropdown[data-v-24d1f392] {\n    width: 0; \n    height: 0; \n    border-left: 4px solid transparent; \n    border-right: 4px solid transparent; \n    border-top: 4px solid; \n    float: right; \n    top: .75em; \n    opacity: .8; \n    cursor: pointer;\n}\n.vue-dynamic-select .placeholder[data-v-24d1f392] {\n    display: inline-block;\n    color: #ccc;\n}\n.vue-dynamic-select .result-list[data-v-24d1f392] {\n    border: 1px solid #ced4da; \n    margin: calc(.375em - 1px) calc(-.5em - 1px);\n    width: calc(100% + 2px);\n    min-width: calc(100% + 2px);\n    border-radius: 0 0 .25em .25em;\n    cursor: pointer;\n    position: absolute;\n    z-index: 10;\n    background-color: #fff;\n}\n.vue-dynamic-select .result-list .result[data-v-24d1f392] {\n    padding: .375em .75em;\n    color: #333;\n}\n.vue-dynamic-select .result-list .result[data-v-24d1f392]:hover, .vue-dynamic-select .result-list .result[data-v-24d1f392]:focus {\n    background-color: #efefef;\n    outline: none;\n}\n.vue-dynamic-select .selected-option[data-v-24d1f392] {\n    display: inline-block;\n}\n.vue-dynamic-select .search[data-v-24d1f392] {\n    border: none;\n    width: 50px;\n}\n.vue-dynamic-select .search[data-v-24d1f392]:focus {\n    outline: none;\n}\n", map: {"version":3,"sources":["/home/smontgomery/Projects/vue-dynamic-select/src/DynamicSelect.vue"],"names":[],"mappings":";AA0KA;IACA,yBAAA;IACA,kBAAA;IACA,oBAAA;IACA,oBAAA;IACA,YAAA;IACA,cAAA;AACA;AACA;IACA,QAAA;IACA,SAAA;IACA,kCAAA;IACA,mCAAA;IACA,qBAAA;IACA,YAAA;IACA,UAAA;IACA,WAAA;IACA,eAAA;AACA;AACA;IACA,qBAAA;IACA,WAAA;AACA;AACA;IACA,yBAAA;IACA,4CAAA;IACA,uBAAA;IACA,2BAAA;IACA,8BAAA;IACA,eAAA;IACA,kBAAA;IACA,WAAA;IACA,sBAAA;AACA;AACA;IACA,qBAAA;IACA,WAAA;AACA;AACA;IACA,yBAAA;IACA,aAAA;AACA;AACA;IACA,qBAAA;AACA;AACA;IACA,YAAA;IACA,WAAA;AACA;AACA;IACA,aAAA;AACA","file":"DynamicSelect.vue","sourcesContent":["<template>\n    <div>\n        <div tabindex=\"0\" @focusin=\"hasFocus=true\" class=\"vue-dynamic-select\">\n            <div v-if=\"showPlaceholder\" class=\"placeholder\" v-text=\"placeholder\"></div>\n            <div class=\"selected-option\" v-text=\"selectedOption[optionText]\" v-if=\"selectedOption && !hasFocus\" />\n            <input @focus=\"hasFocus=true\" autocomplete=\"off\" class=\"search\" ref=\"search\" v-model=\"search\" @keyup=\"moveToResults\" @keydown=\"removeOption\" />\n            <i class=\"dropdown\" />\n            <div v-if=\"showResultList\" ref=\"resultList\" class=\"result-list\">\n                <div tabindex=\"0\" ref=\"result\" class=\"result\" v-for=\"result in results\" :key=\"result[optionValue]\" v-html=\"highlight(result[optionText])\" @click=\"selectOption(result)\" @keyup.prevent=\"navigateResults(result, $event)\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        props: {\n            placeholder: {\n                type: String, \n                default: 'search',\n                required: false\n            },\n            options: {\n                type: Array, \n                default: function() {\n                    return []\n                },\n                required: true\n            },\n            optionValue: {\n                type: String, \n                default: 'id',\n                required: true\n            },\n            optionText: {\n                type: String, \n                default: 'name',\n                required: true\n            },\n            value: {\n                type: Object,\n                default: function() {\n                    return null\n                },\n                required: false\n            }\n        },\n        data: function() {\n            return {\n                hasFocus: false,\n                search: null,\n                selectedOption: this.value,\n                selectedResult: 0\n            };\n        },\n        mounted() {\n            // Add onclick method to body to hide result list when component loses focus\n            window.addEventListener(\"click\", this.loseFocus)\n        },\n        destroyed() {\n            window.removeEventListener(\"click\", this.loseFocus)\n        },\n        computed: {\n            results: function() {\n                // Filter items on search text (if not empty, case insensitive) and when item isn't already selected (else return all items not selected)\n                return this.search ? this.options.filter(i => String(i[this.optionText]).toLowerCase().indexOf(this.search.toLowerCase()) > -1) : this.options;\n            },\n            showResultList: function() {\n                return this.hasFocus && this.results.length > 0;\n            },\n            showPlaceholder: function() {\n                return !this.hasFocus && !this.selectedOption;\n            }\n        },\n        watch: {\n            hasFocus: function(hasFocus) {\n                // Clear the search box when component loses focus\n                window.removeEventListener(\"keydown\", this.stopScroll);\n                if(hasFocus) {\n                    window.addEventListener(\"keydown\", this.stopScroll);\n                    this.$refs.search.focus();\n                } else {\n                    this.search = null;\n                    this.selectedResult = 0;\n                    this.$refs.search.blur();\n                }\n            },\n            value: function() {\n                // Load selected option on prop value change\n                this.selectedOption = this.options.find( option => {\n                    return this.value && option[this.optionValue] == this.value[this.optionValue];\n                })\n            },\n            selectedOption: function() {\n                // Provide selected item to parent\n                this.$emit('input', this.selectedOption);\n            },\n            search: function() {\n                // Provide search text to parent (for ajax fetching, etc)\n                this.$emit('search', this.search);\n            }\n        },\n        methods: {\n            selectOption: function(option) {\n                this.selectedOption = option;\n                this.hasFocus = false;\n            },\n            removeOption: function(event) {\n                // Remove selected option if user hits backspace on empty search field\n                if(event.keyCode === 8 && (this.search == null || this.search == '')) {\n                    this.selectedOption = null;\n                    this.hasFocus = false;\n                    event.preventDefault();\n                }\n            },\n            moveToResults: function(event) {\n                // Move down to first result if user presses down arrow (from search field)\n                if(event.keyCode === 40) {\n                    if(this.$refs.result.length > 0) {\n                        this.$refs.resultList.children.item(0).focus();\n                    }\n                }\n            },\n            navigateResults: function(option, event) {\n                // Add option to selected items on enter key\n                if(event.keyCode === 13) {\n                    this.selectOption(option);\n                // Move up or down items in result list with up or down arrow keys\n                } else if(event.keyCode === 40 || event.keyCode === 38) {\n                    if(event.keyCode === 40) {\n                        this.selectedResult++;\n                    } else if(event.keyCode === 38) {\n                        this.selectedResult--;\n                    }\n                    let next = this.$refs.resultList.children.item(this.selectedResult);\n                    if(next) {\n                        next.focus();\n                    } else {\n                        this.selectedResult = 0;\n                        this.$refs.search.focus();\n                    }\n                }\n            },\n            highlight: function(value) {\n                // Highlights the part of each result that matches the search text\n                if(this.search) {\n                    let matchPos = String(value).toLowerCase().indexOf(this.search.toLowerCase());\n                    if(matchPos > -1) {\n                        let matchStr = String(value).substr(matchPos, this.search.length);\n                        value = String(value).replace(matchStr, '<span style=\"font-weight: bold; background-color: #efefef;\">'+matchStr+'</span>');\n                    }\n                }\n\n                return value;\n            },\n            stopScroll: function(event) {\n                if(event.keyCode === 40 || event.keyCode === 38) {\n                    event.preventDefault();\n                }\n            },\n            loseFocus: function(event) {\n                if(!this.$el.contains(event.target)) {\n                    this.hasFocus = false;\n                }\n            }\n        }\n    }\n</script>\n\n<style scoped>\n    .vue-dynamic-select {\n        border: 1px solid #ced4da; \n        position: relative;\n        padding: .375em .5em;\n        border-radius: .25em;\n        cursor: text;\n        display: block;\n    }\n    .vue-dynamic-select i.dropdown {\n        width: 0; \n        height: 0; \n        border-left: 4px solid transparent; \n        border-right: 4px solid transparent; \n        border-top: 4px solid; \n        float: right; \n        top: .75em; \n        opacity: .8; \n        cursor: pointer;\n    }\n    .vue-dynamic-select .placeholder {\n        display: inline-block;\n        color: #ccc;\n    }\n    .vue-dynamic-select .result-list {\n        border: 1px solid #ced4da; \n        margin: calc(.375em - 1px) calc(-.5em - 1px);\n        width: calc(100% + 2px);\n        min-width: calc(100% + 2px);\n        border-radius: 0 0 .25em .25em;\n        cursor: pointer;\n        position: absolute;\n        z-index: 10;\n        background-color: #fff;\n    }\n    .vue-dynamic-select .result-list .result {\n        padding: .375em .75em;\n        color: #333;\n    }\n    .vue-dynamic-select .result-list .result:hover, .vue-dynamic-select .result-list .result:focus {\n        background-color: #efefef;\n        outline: none;\n    }\n    .vue-dynamic-select .selected-option {\n        display: inline-block;\n    }\n    .vue-dynamic-select .search {\n        border: none;\n        width: 50px;\n    }\n    .vue-dynamic-select .search:focus {\n        outline: none;\n    }\n</style>\n"]}, media: undefined });
417 | 
418 |       };
419 |       /* scoped */
420 |       var __vue_scope_id__ = "data-v-24d1f392";
421 |       /* module identifier */
422 |       var __vue_module_identifier__ = undefined;
423 |       /* functional template */
424 |       var __vue_is_functional_template__ = false;
425 |       /* style inject SSR */
426 |       
427 | 
428 |       
429 |       var DynamicSelect = normalizeComponent_1(
430 |         { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
431 |         __vue_inject_styles__,
432 |         __vue_script__,
433 |         __vue_scope_id__,
434 |         __vue_is_functional_template__,
435 |         __vue_module_identifier__,
436 |         browser,
437 |         undefined
438 |       )
439 | 
440 |     // Declare install function executed by Vue.use()
441 |     function install(Vue) {
442 |     	if (install.installed) { return; }
443 |     	install.installed = true;
444 |     	Vue.component('DynamicSelect', DynamicSelect);
445 |     }
446 | 
447 |     // Create module definition for Vue.use()
448 |     var plugin = {
449 |     	install: install,
450 |     };
451 | 
452 |     // Auto-install when vue is found (eg. in browser via <script> tag)
453 |     var GlobalVue = null;
454 |     if (typeof window !== 'undefined') {
455 |     	GlobalVue = window.Vue;
456 |     } else if (typeof global !== 'undefined') {
457 |     	GlobalVue = global.Vue;
458 |     }
459 |     if (GlobalVue) {
460 |     	GlobalVue.use(plugin);
461 |     }
462 | 
463 |     exports.install = install;
464 |     exports.default = DynamicSelect;
465 | 
466 |     return exports;
467 | 
468 | }({}));
469 | 


--------------------------------------------------------------------------------
/dist/vue-dynamic-select.umd.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 |     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  3 |     typeof define === 'function' && define.amd ? define(['exports'], factory) :
  4 |     (factory((global.DynamicSelect = {})));
  5 | }(this, (function (exports) { 'use strict';
  6 | 
  7 |     //
  8 |     //
  9 |     //
 10 |     //
 11 |     //
 12 |     //
 13 |     //
 14 |     //
 15 |     //
 16 |     //
 17 |     //
 18 |     //
 19 |     //
 20 |     //
 21 | 
 22 |     var script = {
 23 |         props: {
 24 |             placeholder: {
 25 |                 type: String, 
 26 |                 default: 'search',
 27 |                 required: false
 28 |             },
 29 |             options: {
 30 |                 type: Array, 
 31 |                 default: function() {
 32 |                     return []
 33 |                 },
 34 |                 required: true
 35 |             },
 36 |             optionValue: {
 37 |                 type: String, 
 38 |                 default: 'id',
 39 |                 required: true
 40 |             },
 41 |             optionText: {
 42 |                 type: String, 
 43 |                 default: 'name',
 44 |                 required: true
 45 |             },
 46 |             value: {
 47 |                 type: Object,
 48 |                 default: function() {
 49 |                     return null
 50 |                 },
 51 |                 required: false
 52 |             }
 53 |         },
 54 |         data: function() {
 55 |             return {
 56 |                 hasFocus: false,
 57 |                 search: null,
 58 |                 selectedOption: this.value,
 59 |                 selectedResult: 0
 60 |             };
 61 |         },
 62 |         mounted: function mounted() {
 63 |             // Add onclick method to body to hide result list when component loses focus
 64 |             window.addEventListener("click", this.loseFocus);
 65 |         },
 66 |         destroyed: function destroyed() {
 67 |             window.removeEventListener("click", this.loseFocus);
 68 |         },
 69 |         computed: {
 70 |             results: function() {
 71 |                 var this$1 = this;
 72 | 
 73 |                 // Filter items on search text (if not empty, case insensitive) and when item isn't already selected (else return all items not selected)
 74 |                 return this.search ? this.options.filter(function (i) { return String(i[this$1.optionText]).toLowerCase().indexOf(this$1.search.toLowerCase()) > -1; }) : this.options;
 75 |             },
 76 |             showResultList: function() {
 77 |                 return this.hasFocus && this.results.length > 0;
 78 |             },
 79 |             showPlaceholder: function() {
 80 |                 return !this.hasFocus && !this.selectedOption;
 81 |             }
 82 |         },
 83 |         watch: {
 84 |             hasFocus: function(hasFocus) {
 85 |                 // Clear the search box when component loses focus
 86 |                 window.removeEventListener("keydown", this.stopScroll);
 87 |                 if(hasFocus) {
 88 |                     window.addEventListener("keydown", this.stopScroll);
 89 |                     this.$refs.search.focus();
 90 |                 } else {
 91 |                     this.search = null;
 92 |                     this.selectedResult = 0;
 93 |                     this.$refs.search.blur();
 94 |                 }
 95 |             },
 96 |             value: function() {
 97 |                 var this$1 = this;
 98 | 
 99 |                 // Load selected option on prop value change
100 |                 this.selectedOption = this.options.find( function (option) {
101 |                     return this$1.value && option[this$1.optionValue] == this$1.value[this$1.optionValue];
102 |                 });
103 |             },
104 |             selectedOption: function() {
105 |                 // Provide selected item to parent
106 |                 this.$emit('input', this.selectedOption);
107 |             },
108 |             search: function() {
109 |                 // Provide search text to parent (for ajax fetching, etc)
110 |                 this.$emit('search', this.search);
111 |             }
112 |         },
113 |         methods: {
114 |             selectOption: function(option) {
115 |                 this.selectedOption = option;
116 |                 this.hasFocus = false;
117 |             },
118 |             removeOption: function(event) {
119 |                 // Remove selected option if user hits backspace on empty search field
120 |                 if(event.keyCode === 8 && (this.search == null || this.search == '')) {
121 |                     this.selectedOption = null;
122 |                     this.hasFocus = false;
123 |                     event.preventDefault();
124 |                 }
125 |             },
126 |             moveToResults: function(event) {
127 |                 // Move down to first result if user presses down arrow (from search field)
128 |                 if(event.keyCode === 40) {
129 |                     if(this.$refs.result.length > 0) {
130 |                         this.$refs.resultList.children.item(0).focus();
131 |                     }
132 |                 }
133 |             },
134 |             navigateResults: function(option, event) {
135 |                 // Add option to selected items on enter key
136 |                 if(event.keyCode === 13) {
137 |                     this.selectOption(option);
138 |                 // Move up or down items in result list with up or down arrow keys
139 |                 } else if(event.keyCode === 40 || event.keyCode === 38) {
140 |                     if(event.keyCode === 40) {
141 |                         this.selectedResult++;
142 |                     } else if(event.keyCode === 38) {
143 |                         this.selectedResult--;
144 |                     }
145 |                     var next = this.$refs.resultList.children.item(this.selectedResult);
146 |                     if(next) {
147 |                         next.focus();
148 |                     } else {
149 |                         this.selectedResult = 0;
150 |                         this.$refs.search.focus();
151 |                     }
152 |                 }
153 |             },
154 |             highlight: function(value) {
155 |                 // Highlights the part of each result that matches the search text
156 |                 if(this.search) {
157 |                     var matchPos = String(value).toLowerCase().indexOf(this.search.toLowerCase());
158 |                     if(matchPos > -1) {
159 |                         var matchStr = String(value).substr(matchPos, this.search.length);
160 |                         value = String(value).replace(matchStr, '<span style="font-weight: bold; background-color: #efefef;">'+matchStr+'</span>');
161 |                     }
162 |                 }
163 | 
164 |                 return value;
165 |             },
166 |             stopScroll: function(event) {
167 |                 if(event.keyCode === 40 || event.keyCode === 38) {
168 |                     event.preventDefault();
169 |                 }
170 |             },
171 |             loseFocus: function(event) {
172 |                 if(!this.$el.contains(event.target)) {
173 |                     this.hasFocus = false;
174 |                 }
175 |             }
176 |         }
177 |     }
178 | 
179 |     function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
180 |     /* server only */
181 |     , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
182 |       if (typeof shadowMode !== 'boolean') {
183 |         createInjectorSSR = createInjector;
184 |         createInjector = shadowMode;
185 |         shadowMode = false;
186 |       } // Vue.extend constructor export interop.
187 | 
188 | 
189 |       var options = typeof script === 'function' ? script.options : script; // render functions
190 | 
191 |       if (template && template.render) {
192 |         options.render = template.render;
193 |         options.staticRenderFns = template.staticRenderFns;
194 |         options._compiled = true; // functional template
195 | 
196 |         if (isFunctionalTemplate) {
197 |           options.functional = true;
198 |         }
199 |       } // scopedId
200 | 
201 | 
202 |       if (scopeId) {
203 |         options._scopeId = scopeId;
204 |       }
205 | 
206 |       var hook;
207 | 
208 |       if (moduleIdentifier) {
209 |         // server build
210 |         hook = function hook(context) {
211 |           // 2.3 injection
212 |           context = context || // cached call
213 |           this.$vnode && this.$vnode.ssrContext || // stateful
214 |           this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
215 |           // 2.2 with runInNewContext: true
216 | 
217 |           if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
218 |             context = __VUE_SSR_CONTEXT__;
219 |           } // inject component styles
220 | 
221 | 
222 |           if (style) {
223 |             style.call(this, createInjectorSSR(context));
224 |           } // register component module identifier for async chunk inference
225 | 
226 | 
227 |           if (context && context._registeredComponents) {
228 |             context._registeredComponents.add(moduleIdentifier);
229 |           }
230 |         }; // used by ssr in case component is cached and beforeCreate
231 |         // never gets called
232 | 
233 | 
234 |         options._ssrRegister = hook;
235 |       } else if (style) {
236 |         hook = shadowMode ? function () {
237 |           style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
238 |         } : function (context) {
239 |           style.call(this, createInjector(context));
240 |         };
241 |       }
242 | 
243 |       if (hook) {
244 |         if (options.functional) {
245 |           // register for functional component in vue file
246 |           var originalRender = options.render;
247 | 
248 |           options.render = function renderWithStyleInjection(h, context) {
249 |             hook.call(context);
250 |             return originalRender(h, context);
251 |           };
252 |         } else {
253 |           // inject component registration as beforeCreate hook
254 |           var existing = options.beforeCreate;
255 |           options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
256 |         }
257 |       }
258 | 
259 |       return script;
260 |     }
261 | 
262 |     var normalizeComponent_1 = normalizeComponent;
263 | 
264 |     var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
265 |     function createInjector(context) {
266 |       return function (id, style) {
267 |         return addStyle(id, style);
268 |       };
269 |     }
270 |     var HEAD = document.head || document.getElementsByTagName('head')[0];
271 |     var styles = {};
272 | 
273 |     function addStyle(id, css) {
274 |       var group = isOldIE ? css.media || 'default' : id;
275 |       var style = styles[group] || (styles[group] = {
276 |         ids: new Set(),
277 |         styles: []
278 |       });
279 | 
280 |       if (!style.ids.has(id)) {
281 |         style.ids.add(id);
282 |         var code = css.source;
283 | 
284 |         if (css.map) {
285 |           // https://developer.chrome.com/devtools/docs/javascript-debugging
286 |           // this makes source maps inside style tags work properly in Chrome
287 |           code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
288 | 
289 |           code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
290 |         }
291 | 
292 |         if (!style.element) {
293 |           style.element = document.createElement('style');
294 |           style.element.type = 'text/css';
295 |           if (css.media) { style.element.setAttribute('media', css.media); }
296 |           HEAD.appendChild(style.element);
297 |         }
298 | 
299 |         if ('styleSheet' in style.element) {
300 |           style.styles.push(code);
301 |           style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
302 |         } else {
303 |           var index = style.ids.size - 1;
304 |           var textNode = document.createTextNode(code);
305 |           var nodes = style.element.childNodes;
306 |           if (nodes[index]) { style.element.removeChild(nodes[index]); }
307 |           if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); }
308 |         }
309 |       }
310 |     }
311 | 
312 |     var browser = createInjector;
313 | 
314 |     /* script */
315 |     var __vue_script__ = script;
316 | 
317 |     /* template */
318 |     var __vue_render__ = function() {
319 |       var _vm = this;
320 |       var _h = _vm.$createElement;
321 |       var _c = _vm._self._c || _h;
322 |       return _c("div", [
323 |         _c(
324 |           "div",
325 |           {
326 |             staticClass: "vue-dynamic-select",
327 |             attrs: { tabindex: "0" },
328 |             on: {
329 |               focusin: function($event) {
330 |                 _vm.hasFocus = true;
331 |               }
332 |             }
333 |           },
334 |           [
335 |             _vm.showPlaceholder
336 |               ? _c("div", {
337 |                   staticClass: "placeholder",
338 |                   domProps: { textContent: _vm._s(_vm.placeholder) }
339 |                 })
340 |               : _vm._e(),
341 |             _vm._v(" "),
342 |             _vm.selectedOption && !_vm.hasFocus
343 |               ? _c("div", {
344 |                   staticClass: "selected-option",
345 |                   domProps: {
346 |                     textContent: _vm._s(_vm.selectedOption[_vm.optionText])
347 |                   }
348 |                 })
349 |               : _vm._e(),
350 |             _vm._v(" "),
351 |             _c("input", {
352 |               directives: [
353 |                 {
354 |                   name: "model",
355 |                   rawName: "v-model",
356 |                   value: _vm.search,
357 |                   expression: "search"
358 |                 }
359 |               ],
360 |               ref: "search",
361 |               staticClass: "search",
362 |               attrs: { autocomplete: "off" },
363 |               domProps: { value: _vm.search },
364 |               on: {
365 |                 focus: function($event) {
366 |                   _vm.hasFocus = true;
367 |                 },
368 |                 keyup: _vm.moveToResults,
369 |                 keydown: _vm.removeOption,
370 |                 input: function($event) {
371 |                   if ($event.target.composing) {
372 |                     return
373 |                   }
374 |                   _vm.search = $event.target.value;
375 |                 }
376 |               }
377 |             }),
378 |             _vm._v(" "),
379 |             _c("i", { staticClass: "dropdown" }),
380 |             _vm._v(" "),
381 |             _vm.showResultList
382 |               ? _c(
383 |                   "div",
384 |                   { ref: "resultList", staticClass: "result-list" },
385 |                   _vm._l(_vm.results, function(result) {
386 |                     return _c("div", {
387 |                       key: result[_vm.optionValue],
388 |                       ref: "result",
389 |                       refInFor: true,
390 |                       staticClass: "result",
391 |                       attrs: { tabindex: "0" },
392 |                       domProps: {
393 |                         innerHTML: _vm._s(_vm.highlight(result[_vm.optionText]))
394 |                       },
395 |                       on: {
396 |                         click: function($event) {
397 |                           return _vm.selectOption(result)
398 |                         },
399 |                         keyup: function($event) {
400 |                           $event.preventDefault();
401 |                           return _vm.navigateResults(result, $event)
402 |                         }
403 |                       }
404 |                     })
405 |                   }),
406 |                   0
407 |                 )
408 |               : _vm._e()
409 |           ]
410 |         )
411 |       ])
412 |     };
413 |     var __vue_staticRenderFns__ = [];
414 |     __vue_render__._withStripped = true;
415 | 
416 |       /* style */
417 |       var __vue_inject_styles__ = function (inject) {
418 |         if (!inject) { return }
419 |         inject("data-v-24d1f392_0", { source: "\n.vue-dynamic-select[data-v-24d1f392] {\n    border: 1px solid #ced4da; \n    position: relative;\n    padding: .375em .5em;\n    border-radius: .25em;\n    cursor: text;\n    display: block;\n}\n.vue-dynamic-select i.dropdown[data-v-24d1f392] {\n    width: 0; \n    height: 0; \n    border-left: 4px solid transparent; \n    border-right: 4px solid transparent; \n    border-top: 4px solid; \n    float: right; \n    top: .75em; \n    opacity: .8; \n    cursor: pointer;\n}\n.vue-dynamic-select .placeholder[data-v-24d1f392] {\n    display: inline-block;\n    color: #ccc;\n}\n.vue-dynamic-select .result-list[data-v-24d1f392] {\n    border: 1px solid #ced4da; \n    margin: calc(.375em - 1px) calc(-.5em - 1px);\n    width: calc(100% + 2px);\n    min-width: calc(100% + 2px);\n    border-radius: 0 0 .25em .25em;\n    cursor: pointer;\n    position: absolute;\n    z-index: 10;\n    background-color: #fff;\n}\n.vue-dynamic-select .result-list .result[data-v-24d1f392] {\n    padding: .375em .75em;\n    color: #333;\n}\n.vue-dynamic-select .result-list .result[data-v-24d1f392]:hover, .vue-dynamic-select .result-list .result[data-v-24d1f392]:focus {\n    background-color: #efefef;\n    outline: none;\n}\n.vue-dynamic-select .selected-option[data-v-24d1f392] {\n    display: inline-block;\n}\n.vue-dynamic-select .search[data-v-24d1f392] {\n    border: none;\n    width: 50px;\n}\n.vue-dynamic-select .search[data-v-24d1f392]:focus {\n    outline: none;\n}\n", map: {"version":3,"sources":["/home/smontgomery/Projects/vue-dynamic-select/src/DynamicSelect.vue"],"names":[],"mappings":";AA0KA;IACA,yBAAA;IACA,kBAAA;IACA,oBAAA;IACA,oBAAA;IACA,YAAA;IACA,cAAA;AACA;AACA;IACA,QAAA;IACA,SAAA;IACA,kCAAA;IACA,mCAAA;IACA,qBAAA;IACA,YAAA;IACA,UAAA;IACA,WAAA;IACA,eAAA;AACA;AACA;IACA,qBAAA;IACA,WAAA;AACA;AACA;IACA,yBAAA;IACA,4CAAA;IACA,uBAAA;IACA,2BAAA;IACA,8BAAA;IACA,eAAA;IACA,kBAAA;IACA,WAAA;IACA,sBAAA;AACA;AACA;IACA,qBAAA;IACA,WAAA;AACA;AACA;IACA,yBAAA;IACA,aAAA;AACA;AACA;IACA,qBAAA;AACA;AACA;IACA,YAAA;IACA,WAAA;AACA;AACA;IACA,aAAA;AACA","file":"DynamicSelect.vue","sourcesContent":["<template>\n    <div>\n        <div tabindex=\"0\" @focusin=\"hasFocus=true\" class=\"vue-dynamic-select\">\n            <div v-if=\"showPlaceholder\" class=\"placeholder\" v-text=\"placeholder\"></div>\n            <div class=\"selected-option\" v-text=\"selectedOption[optionText]\" v-if=\"selectedOption && !hasFocus\" />\n            <input @focus=\"hasFocus=true\" autocomplete=\"off\" class=\"search\" ref=\"search\" v-model=\"search\" @keyup=\"moveToResults\" @keydown=\"removeOption\" />\n            <i class=\"dropdown\" />\n            <div v-if=\"showResultList\" ref=\"resultList\" class=\"result-list\">\n                <div tabindex=\"0\" ref=\"result\" class=\"result\" v-for=\"result in results\" :key=\"result[optionValue]\" v-html=\"highlight(result[optionText])\" @click=\"selectOption(result)\" @keyup.prevent=\"navigateResults(result, $event)\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        props: {\n            placeholder: {\n                type: String, \n                default: 'search',\n                required: false\n            },\n            options: {\n                type: Array, \n                default: function() {\n                    return []\n                },\n                required: true\n            },\n            optionValue: {\n                type: String, \n                default: 'id',\n                required: true\n            },\n            optionText: {\n                type: String, \n                default: 'name',\n                required: true\n            },\n            value: {\n                type: Object,\n                default: function() {\n                    return null\n                },\n                required: false\n            }\n        },\n        data: function() {\n            return {\n                hasFocus: false,\n                search: null,\n                selectedOption: this.value,\n                selectedResult: 0\n            };\n        },\n        mounted() {\n            // Add onclick method to body to hide result list when component loses focus\n            window.addEventListener(\"click\", this.loseFocus)\n        },\n        destroyed() {\n            window.removeEventListener(\"click\", this.loseFocus)\n        },\n        computed: {\n            results: function() {\n                // Filter items on search text (if not empty, case insensitive) and when item isn't already selected (else return all items not selected)\n                return this.search ? this.options.filter(i => String(i[this.optionText]).toLowerCase().indexOf(this.search.toLowerCase()) > -1) : this.options;\n            },\n            showResultList: function() {\n                return this.hasFocus && this.results.length > 0;\n            },\n            showPlaceholder: function() {\n                return !this.hasFocus && !this.selectedOption;\n            }\n        },\n        watch: {\n            hasFocus: function(hasFocus) {\n                // Clear the search box when component loses focus\n                window.removeEventListener(\"keydown\", this.stopScroll);\n                if(hasFocus) {\n                    window.addEventListener(\"keydown\", this.stopScroll);\n                    this.$refs.search.focus();\n                } else {\n                    this.search = null;\n                    this.selectedResult = 0;\n                    this.$refs.search.blur();\n                }\n            },\n            value: function() {\n                // Load selected option on prop value change\n                this.selectedOption = this.options.find( option => {\n                    return this.value && option[this.optionValue] == this.value[this.optionValue];\n                })\n            },\n            selectedOption: function() {\n                // Provide selected item to parent\n                this.$emit('input', this.selectedOption);\n            },\n            search: function() {\n                // Provide search text to parent (for ajax fetching, etc)\n                this.$emit('search', this.search);\n            }\n        },\n        methods: {\n            selectOption: function(option) {\n                this.selectedOption = option;\n                this.hasFocus = false;\n            },\n            removeOption: function(event) {\n                // Remove selected option if user hits backspace on empty search field\n                if(event.keyCode === 8 && (this.search == null || this.search == '')) {\n                    this.selectedOption = null;\n                    this.hasFocus = false;\n                    event.preventDefault();\n                }\n            },\n            moveToResults: function(event) {\n                // Move down to first result if user presses down arrow (from search field)\n                if(event.keyCode === 40) {\n                    if(this.$refs.result.length > 0) {\n                        this.$refs.resultList.children.item(0).focus();\n                    }\n                }\n            },\n            navigateResults: function(option, event) {\n                // Add option to selected items on enter key\n                if(event.keyCode === 13) {\n                    this.selectOption(option);\n                // Move up or down items in result list with up or down arrow keys\n                } else if(event.keyCode === 40 || event.keyCode === 38) {\n                    if(event.keyCode === 40) {\n                        this.selectedResult++;\n                    } else if(event.keyCode === 38) {\n                        this.selectedResult--;\n                    }\n                    let next = this.$refs.resultList.children.item(this.selectedResult);\n                    if(next) {\n                        next.focus();\n                    } else {\n                        this.selectedResult = 0;\n                        this.$refs.search.focus();\n                    }\n                }\n            },\n            highlight: function(value) {\n                // Highlights the part of each result that matches the search text\n                if(this.search) {\n                    let matchPos = String(value).toLowerCase().indexOf(this.search.toLowerCase());\n                    if(matchPos > -1) {\n                        let matchStr = String(value).substr(matchPos, this.search.length);\n                        value = String(value).replace(matchStr, '<span style=\"font-weight: bold; background-color: #efefef;\">'+matchStr+'</span>');\n                    }\n                }\n\n                return value;\n            },\n            stopScroll: function(event) {\n                if(event.keyCode === 40 || event.keyCode === 38) {\n                    event.preventDefault();\n                }\n            },\n            loseFocus: function(event) {\n                if(!this.$el.contains(event.target)) {\n                    this.hasFocus = false;\n                }\n            }\n        }\n    }\n</script>\n\n<style scoped>\n    .vue-dynamic-select {\n        border: 1px solid #ced4da; \n        position: relative;\n        padding: .375em .5em;\n        border-radius: .25em;\n        cursor: text;\n        display: block;\n    }\n    .vue-dynamic-select i.dropdown {\n        width: 0; \n        height: 0; \n        border-left: 4px solid transparent; \n        border-right: 4px solid transparent; \n        border-top: 4px solid; \n        float: right; \n        top: .75em; \n        opacity: .8; \n        cursor: pointer;\n    }\n    .vue-dynamic-select .placeholder {\n        display: inline-block;\n        color: #ccc;\n    }\n    .vue-dynamic-select .result-list {\n        border: 1px solid #ced4da; \n        margin: calc(.375em - 1px) calc(-.5em - 1px);\n        width: calc(100% + 2px);\n        min-width: calc(100% + 2px);\n        border-radius: 0 0 .25em .25em;\n        cursor: pointer;\n        position: absolute;\n        z-index: 10;\n        background-color: #fff;\n    }\n    .vue-dynamic-select .result-list .result {\n        padding: .375em .75em;\n        color: #333;\n    }\n    .vue-dynamic-select .result-list .result:hover, .vue-dynamic-select .result-list .result:focus {\n        background-color: #efefef;\n        outline: none;\n    }\n    .vue-dynamic-select .selected-option {\n        display: inline-block;\n    }\n    .vue-dynamic-select .search {\n        border: none;\n        width: 50px;\n    }\n    .vue-dynamic-select .search:focus {\n        outline: none;\n    }\n</style>\n"]}, media: undefined });
420 | 
421 |       };
422 |       /* scoped */
423 |       var __vue_scope_id__ = "data-v-24d1f392";
424 |       /* module identifier */
425 |       var __vue_module_identifier__ = undefined;
426 |       /* functional template */
427 |       var __vue_is_functional_template__ = false;
428 |       /* style inject SSR */
429 |       
430 | 
431 |       
432 |       var DynamicSelect = normalizeComponent_1(
433 |         { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
434 |         __vue_inject_styles__,
435 |         __vue_script__,
436 |         __vue_scope_id__,
437 |         __vue_is_functional_template__,
438 |         __vue_module_identifier__,
439 |         browser,
440 |         undefined
441 |       )
442 | 
443 |     // Declare install function executed by Vue.use()
444 |     function install(Vue) {
445 |     	if (install.installed) { return; }
446 |     	install.installed = true;
447 |     	Vue.component('DynamicSelect', DynamicSelect);
448 |     }
449 | 
450 |     // Create module definition for Vue.use()
451 |     var plugin = {
452 |     	install: install,
453 |     };
454 | 
455 |     // Auto-install when vue is found (eg. in browser via <script> tag)
456 |     var GlobalVue = null;
457 |     if (typeof window !== 'undefined') {
458 |     	GlobalVue = window.Vue;
459 |     } else if (typeof global !== 'undefined') {
460 |     	GlobalVue = global.Vue;
461 |     }
462 |     if (GlobalVue) {
463 |     	GlobalVue.use(plugin);
464 |     }
465 | 
466 |     exports.install = install;
467 |     exports.default = DynamicSelect;
468 | 
469 |     Object.defineProperty(exports, '__esModule', { value: true });
470 | 
471 | })));
472 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-dynamic-select",
 3 |   "version": "1.0.16",
 4 |   "description": "A VueJS plugin that provides a searchable and reactive select list component with no dependencies.",
 5 |   "main": "dist/vue-dynamic-select.umd.js",
 6 |   "module": "dist/vue-dynamic-select.esm.js",
 7 |   "unpkg": "dist/vue-dynamic-select.min.js",
 8 |   "browser": {
 9 |     "./sfc": "src/vue-dynamic-select.vue"
10 |   },
11 |   "scripts": {
12 |     "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
13 |     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-dynamic-select.umd.js",
14 |     "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-dynamic-select.esm.js",
15 |     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-dynamic-select.min.js"
16 |   },
17 |   "devDependencies": {
18 |     "parse5": "^2.2.3",
19 |     "rollup": "^0.57.1",
20 |     "rollup-plugin-buble": "^0.19.6",
21 |     "rollup-plugin-commonjs": "^9.2.0",
22 |     "rollup-plugin-vue": "^4.7.2",
23 |     "vue": "^2.5.7",
24 |     "vue-template-compiler": "^2.5.21"
25 |   },
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "git+https://github.com/silasmontgomery/vue-dynamic-select.git"
29 |   },
30 |   "keywords": [
31 |     "vue",
32 |     "js",
33 |     "vuejs",
34 |     "javascript",
35 |     "component",
36 |     "select",
37 |     "list",
38 |     "ajax",
39 |     "reactive",
40 |     "search",
41 |     "searchable",
42 |     "plugin",
43 |     "dynamic"
44 |   ],
45 |   "author": "Silas Montgomery",
46 |   "license": "MIT",
47 |   "bugs": {
48 |     "url": "https://github.com/silasmontgomery/vue-dynamic-select/issues"
49 |   },
50 |   "homepage": "https://github.com/silasmontgomery/vue-dynamic-select#readme"
51 | }
52 | 


--------------------------------------------------------------------------------
/src/DynamicSelect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div tabindex="0" @focusin="hasFocus=true" class="vue-dynamic-select">
  4 |             <div v-if="showPlaceholder" class="placeholder" v-text="placeholder"></div>
  5 |             <div class="selected-option" v-text="selectedOption[optionText]" v-if="selectedOption && !hasFocus" />
  6 |             <input @focus="hasFocus=true" autocomplete="off" class="search" ref="search" v-model="search" @keyup="moveToResults" @keydown="removeOption" />
  7 |             <i class="dropdown" />
  8 |             <div v-if="showResultList" ref="resultList" class="result-list">
  9 |                 <div tabindex="0" ref="result" class="result" v-for="result in results" :key="result[optionValue]" v-html="highlight(result[optionText])" @click="selectOption(result)" @keyup.prevent="navigateResults(result, $event)" />
 10 |             </div>
 11 |         </div>
 12 |     </div>
 13 | </template>
 14 | 
 15 | <script>
 16 |     export default {
 17 |         props: {
 18 |             placeholder: {
 19 |                 type: String, 
 20 |                 default: 'search',
 21 |                 required: false
 22 |             },
 23 |             options: {
 24 |                 type: Array, 
 25 |                 default: function() {
 26 |                     return []
 27 |                 },
 28 |                 required: true
 29 |             },
 30 |             optionValue: {
 31 |                 type: String, 
 32 |                 default: 'id',
 33 |                 required: true
 34 |             },
 35 |             optionText: {
 36 |                 type: String, 
 37 |                 default: 'name',
 38 |                 required: true
 39 |             },
 40 |             value: {
 41 |                 type: Object,
 42 |                 default: function() {
 43 |                     return null
 44 |                 },
 45 |                 required: false
 46 |             }
 47 |         },
 48 |         data: function() {
 49 |             return {
 50 |                 hasFocus: false,
 51 |                 search: null,
 52 |                 selectedOption: this.value,
 53 |                 selectedResult: 0
 54 |             };
 55 |         },
 56 |         mounted() {
 57 |             // Add onclick method to body to hide result list when component loses focus
 58 |             window.addEventListener("click", this.loseFocus)
 59 |         },
 60 |         destroyed() {
 61 |             window.removeEventListener("click", this.loseFocus)
 62 |         },
 63 |         computed: {
 64 |             results: function() {
 65 |                 // Filter items on search text (if not empty, case insensitive) and when item isn't already selected (else return all items not selected)
 66 |                 return this.search ? this.options.filter(i => String(i[this.optionText]).toLowerCase().indexOf(this.search.toLowerCase()) > -1) : this.options;
 67 |             },
 68 |             showResultList: function() {
 69 |                 return this.hasFocus && this.results.length > 0;
 70 |             },
 71 |             showPlaceholder: function() {
 72 |                 return !this.hasFocus && !this.selectedOption;
 73 |             }
 74 |         },
 75 |         watch: {
 76 |             hasFocus: function(hasFocus) {
 77 |                 // Clear the search box when component loses focus
 78 |                 window.removeEventListener("keydown", this.stopScroll);
 79 |                 if(hasFocus) {
 80 |                     window.addEventListener("keydown", this.stopScroll);
 81 |                     this.$refs.search.focus();
 82 |                 } else {
 83 |                     this.search = null;
 84 |                     this.selectedResult = 0;
 85 |                     this.$refs.search.blur();
 86 |                 }
 87 |             },
 88 |             value: function() {
 89 |                 // Load selected option on prop value change
 90 |                 this.selectedOption = this.options.find( option => {
 91 |                     return this.value && option[this.optionValue] == this.value[this.optionValue];
 92 |                 })
 93 |             },
 94 |             selectedOption: function() {
 95 |                 // Provide selected item to parent
 96 |                 this.$emit('input', this.selectedOption);
 97 |             },
 98 |             search: function() {
 99 |                 // Provide search text to parent (for ajax fetching, etc)
100 |                 this.$emit('search', this.search);
101 |             }
102 |         },
103 |         methods: {
104 |             selectOption: function(option) {
105 |                 this.selectedOption = option;
106 |                 this.hasFocus = false;
107 |             },
108 |             removeOption: function(event) {
109 |                 // Remove selected option if user hits backspace on empty search field
110 |                 if(event.keyCode === 8 && (this.search == null || this.search == '')) {
111 |                     this.selectedOption = null;
112 |                     this.hasFocus = false;
113 |                     event.preventDefault();
114 |                 }
115 |             },
116 |             moveToResults: function(event) {
117 |                 // Move down to first result if user presses down arrow (from search field)
118 |                 if(event.keyCode === 40) {
119 |                     if(this.$refs.result.length > 0) {
120 |                         this.$refs.resultList.children.item(0).focus();
121 |                     }
122 |                 }
123 |             },
124 |             navigateResults: function(option, event) {
125 |                 // Add option to selected items on enter key
126 |                 if(event.keyCode === 13) {
127 |                     this.selectOption(option);
128 |                 // Move up or down items in result list with up or down arrow keys
129 |                 } else if(event.keyCode === 40 || event.keyCode === 38) {
130 |                     if(event.keyCode === 40) {
131 |                         this.selectedResult++;
132 |                     } else if(event.keyCode === 38) {
133 |                         this.selectedResult--;
134 |                     }
135 |                     let next = this.$refs.resultList.children.item(this.selectedResult);
136 |                     if(next) {
137 |                         next.focus();
138 |                     } else {
139 |                         this.selectedResult = 0;
140 |                         this.$refs.search.focus();
141 |                     }
142 |                 }
143 |             },
144 |             highlight: function(value) {
145 |                 // Highlights the part of each result that matches the search text
146 |                 if(this.search) {
147 |                     let matchPos = String(value).toLowerCase().indexOf(this.search.toLowerCase());
148 |                     if(matchPos > -1) {
149 |                         let matchStr = String(value).substr(matchPos, this.search.length);
150 |                         value = String(value).replace(matchStr, '<span style="font-weight: bold; background-color: #efefef;">'+matchStr+'</span>');
151 |                     }
152 |                 }
153 | 
154 |                 return value;
155 |             },
156 |             stopScroll: function(event) {
157 |                 if(event.keyCode === 40 || event.keyCode === 38) {
158 |                     event.preventDefault();
159 |                 }
160 |             },
161 |             loseFocus: function(event) {
162 |                 if(!this.$el.contains(event.target)) {
163 |                     this.hasFocus = false;
164 |                 }
165 |             }
166 |         }
167 |     }
168 | </script>
169 | 
170 | <style scoped>
171 |     .vue-dynamic-select {
172 |         border: 1px solid #ced4da; 
173 |         position: relative;
174 |         padding: .375em .5em;
175 |         border-radius: .25em;
176 |         cursor: text;
177 |         display: block;
178 |     }
179 |     .vue-dynamic-select i.dropdown {
180 |         width: 0; 
181 |         height: 0; 
182 |         border-left: 4px solid transparent; 
183 |         border-right: 4px solid transparent; 
184 |         border-top: 4px solid; 
185 |         float: right; 
186 |         top: .75em; 
187 |         opacity: .8; 
188 |         cursor: pointer;
189 |     }
190 |     .vue-dynamic-select .placeholder {
191 |         display: inline-block;
192 |         color: #ccc;
193 |     }
194 |     .vue-dynamic-select .result-list {
195 |         border: 1px solid #ced4da; 
196 |         margin: calc(.375em - 1px) calc(-.5em - 1px);
197 |         width: calc(100% + 2px);
198 |         min-width: calc(100% + 2px);
199 |         border-radius: 0 0 .25em .25em;
200 |         cursor: pointer;
201 |         position: absolute;
202 |         z-index: 10;
203 |         background-color: #fff;
204 |     }
205 |     .vue-dynamic-select .result-list .result {
206 |         padding: .375em .75em;
207 |         color: #333;
208 |     }
209 |     .vue-dynamic-select .result-list .result:hover, .vue-dynamic-select .result-list .result:focus {
210 |         background-color: #efefef;
211 |         outline: none;
212 |     }
213 |     .vue-dynamic-select .selected-option {
214 |         display: inline-block;
215 |     }
216 |     .vue-dynamic-select .search {
217 |         border: none;
218 |         width: 50px;
219 |     }
220 |     .vue-dynamic-select .search:focus {
221 |         outline: none;
222 |     }
223 | </style>
224 | 


--------------------------------------------------------------------------------
/src/images/dynamic-select.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silasmontgomery/vue-dynamic-select/4bf42eacd1068ea2c77879fd371081b281c3132e/src/images/dynamic-select.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import DynamicSelect from './DynamicSelect.vue'
 2 | 
 3 | // Declare install function executed by Vue.use()
 4 | export function install(Vue) {
 5 | 	if (install.installed) return;
 6 | 	install.installed = true;
 7 | 	Vue.component('DynamicSelect', DynamicSelect);
 8 | }
 9 | 
10 | // Create module definition for Vue.use()
11 | const plugin = {
12 | 	install,
13 | };
14 | 
15 | // Auto-install when vue is found (eg. in browser via <script> tag)
16 | let GlobalVue = null;
17 | if (typeof window !== 'undefined') {
18 | 	GlobalVue = window.Vue;
19 | } else if (typeof global !== 'undefined') {
20 | 	GlobalVue = global.Vue;
21 | }
22 | if (GlobalVue) {
23 | 	GlobalVue.use(plugin);
24 | }
25 | 
26 | // To allow use as module (npm/webpack/etc.) export component
27 | export default DynamicSelect;


--------------------------------------------------------------------------------