diff --git a/docs/.vuepress/components/CustomHandlers.vue b/docs/.vuepress/components/CustomHandlers.vue index 6eaa91b..8fa43e8 100644 --- a/docs/.vuepress/components/CustomHandlers.vue +++ b/docs/.vuepress/components/CustomHandlers.vue @@ -1,10 +1,10 @@ @@ -12,19 +12,14 @@ export default { name: 'CustomHandlers', methods: { - handlers (map, vm) { - const createTag = e => { + handlers: (map, vm) => ({ + ...map, 50: e => { e.preventDefault(); - vm.typeAheadSelect(); - vm.searchEl.focus(); - }; - - return { - ...map, // defaults - 32: createTag, // space - 188: createTag, // comma - }; - }, + if( e.key === '@' && vm.search.length > 0 ) { + vm.search = `${vm.search}@gmail.com`; + } + }, + }), }, }; diff --git a/docs/guide/keydown.md b/docs/guide/keydown.md index c2c3f69..f2938ed 100644 --- a/docs/guide/keydown.md +++ b/docs/guide/keydown.md @@ -1,13 +1,19 @@ ### Customizing Keydown Behaviour --- +## `selectOnKeyCodes` + + + +## `mapKeyDown` + Vue Select provides the `map-keydown` Function prop to allow for customizing the components response to -keydown events while the input has focus. Here's the default function definition: +keydown events while the search input has focus. ```js /** - * @param map {Object} Mapped keyCode to handlers { : } - * @param vm {Vue/Component} Vue Select instance + * @param map {Object} Mapped keyCode to handlers { : } + * @param vm {VueSelect} * @return {Object} */ (map, vm) => map, @@ -17,36 +23,41 @@ By default, the prop is a no–op returning the same object `map` object it rece maps keyCodes to handlers: `{ : }`. Modifying this object can override default functionality, or add handlers for different keys that the component doesn't normally listen for. -### Example: Tag on `comma` and `space` +**Default Handlers** -If I have a taggable input, and I want `comma` or `space` to 'tag' the current option, you could -solve that with map-keydown. Since the tab button already creates tags, we can copy the handler -for keyCode 9. +```js +// delete +8: e => this.maybeDeleteValue() -```vue - +// tab +9: e => this.onTab() - +// esc +27: e => this.onEscape() + +// up +38: e => { + e.preventDefault(); + return this.typeAheadUp(); +} + +// down +40: e => { + e.preventDefault(); + return this.typeAheadDown(); +} ``` +### Example: Autocomplete Email Addresses + +This is example listens for the `@` key, and autocompletes an email address with `@gmail.com`. + +<<< @/.vuepress/components/CustomHandlers.vue + diff --git a/src/components/Select.vue b/src/components/Select.vue index d7f3ef1..511861d 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -492,7 +492,7 @@ type: Function, /** * @param map {Object} - * @param vm {Vue/Component} + * @param vm {VueSelect} * @return {Object} */ default: (map, vm) => map,