github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Autocomplete: emit select of textbox value when no selection is made. (#6428) 

* when pressing enter without a selection, select the currently entered text and clear selections.

* added "select-when-unmatched" flag

* restored "???" to "-"
pull/7047/head
ryatziv 2017-09-14 20:11:07 -07:00 committed by 杨奕
parent 36d4f0a6fc
commit 586bde090c
2 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
examples/docs/en-US/input.md
View File

@ -596,26 +596,26 @@ Search data from server-side.
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
| ----| ----| ----| ---- | ----- | | ----| ----| ----| ---- | ----- |
|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text | |type| Same as the `type` attribute of native input, except that it can be `textarea` | string | - | text |
|value| binding value | string/number| — | — | |value| binding value | string/number| - | - |
|maxlength| maximum Input text length| number| — | — | |maxlength| maximum Input text length| number| - | - |
|minlength| minimum Input text length| number | — | — | |minlength| minimum Input text length| number | - | - |
|placeholder| placeholder of Input| string | — | — | |placeholder| placeholder of Input| string | - | - |
|disabled | whether Input is disabled | boolean | — | false | |disabled | whether Input is disabled | boolean | - | false |
|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — | |size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | - |
|icon | icon name | string | — | — | |icon | icon name | string | - | - |
|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 | |rows | number of rows of textarea, only works when `type` is 'textarea' | number | - | 2 |
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | — | false | |autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | - | false |
|auto-complete | same as `auto-complete` in native input | string | on/off | off | |auto-complete | same as `auto-complete` in native input | string | on/off | off |
|name | same as `name` in native input | string | — | — | |name | same as `name` in native input | string | - | - |
| readonly | same as `readonly` in native input | boolean | — | false | | readonly | same as `readonly` in native input | boolean | - | false |
|max | same as `max` in native input | — | — | — | |max | same as `max` in native input | - | - | - |
|min | same as `min` in native input | — | — | — | |min | same as `min` in native input | - | - | - |
|step| same as `step` in native input | — | — | — | |step| same as `step` in native input | - | - | - |
|resize| control the resizability | string | none, both, horizontal, vertical | — | |resize| control the resizability | string | none, both, horizontal, vertical | - |
|autofocus | same as `autofocus` in native input | boolean | — | false | |autofocus | same as `autofocus` in native input | boolean | - | false |
|form | same as `form` in native input | string | — | — | |form | same as `form` in native input | string | - | - |
| on-icon-click | hook function when clicking on the input icon | function | — | — | | on-icon-click | hook function when clicking on the input icon | function | - | - |
### Input Events ### Input Events
@ -630,22 +630,23 @@ Search data from server-side.
Attribute | Description | Type | Options | Default Attribute | Description | Type | Options | Default
|----| ----| ----| ---- | -----| |----| ----| ----| ---- | -----|
|placeholder| the placeholder of Autocomplete| string | — | — | |placeholder| the placeholder of Autocomplete| string | - | - |
|disabled | whether Autocomplete is disabled | boolean | — | false| |disabled | whether Autocomplete is disabled | boolean | - | false|
| props | configuration options, see the following table | object | — | — | | props | configuration options, see the following table | object | - | - |
|icon | icon name | string | — | — | |icon | icon name | string | - | - |
|value | binding value | string | — | — | |value | binding value | string | - | - |
|custom-item | component name of your customized suggestion list item | string | — | — | |custom-item | component name of your customized suggestion list item | string | - | - |
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | |fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | - | - |
| popper-class | custom class name for autocomplete's dropdown | string | — | — | | popper-class | custom class name for autocomplete's dropdown | string | - | - |
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true | | trigger-on-focus | whether show suggestions when input focus | boolean | - | true |
| on-icon-click | hook function when clicking on the input icon | function | — | — | | on-icon-click | hook function when clicking on the input icon | function | - | - |
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | - | false |
### props ### props
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------- | ------ | ------ | ------ | | --------- | ----------------- | ------ | ------ | ------ |
| label | specify which key of option object is used as the option's label | string | — | value | | label | specify which key of option object is used as the option's label | string | - | value |
| value | specify which key of option object is used as the option's value | string | — | value | | value | specify which key of option object is used as the option's value | string | - | value |
### Autocomplete Events ### Autocomplete Events

18
packages/autocomplete/src/autocomplete.vue
View File

@ -73,7 +73,11 @@
}, },
customItem: String, customItem: String,
icon: String, icon: String,
onIconClick: Function onIconClick: Function,
selectWhenUnmatched: {
type: Boolean,
default: false
}
}, },
data() { data() {
return { return {
@ -137,6 +141,12 @@
if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) { if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
e.preventDefault(); e.preventDefault();
this.select(this.suggestions[this.highlightedIndex]); this.select(this.suggestions[this.highlightedIndex]);
} else if (this.selectWhenUnmatched) {
this.$emit('select', {value: this.value});
this.$nextTick(_ => {
this.suggestions = [];
this.highlightedIndex = -1;
});
} }
}, },
select(item) { select(item) {
@ -144,11 +154,15 @@
this.$emit('select', item); this.$emit('select', item);
this.$nextTick(_ => { this.$nextTick(_ => {
this.suggestions = []; this.suggestions = [];
this.highlightedIndex = -1;
}); });
}, },
highlight(index) { highlight(index) {
if (!this.suggestionVisible || this.loading) { return; } if (!this.suggestionVisible || this.loading) { return; }
if (index < 0) index = 0; if (index < 0) {
this.highlightedIndex = -1;
return;
}
if (index >= this.suggestions.length) { if (index >= this.suggestions.length) {
index = this.suggestions.length - 1; index = this.suggestions.length - 1;
} }