test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 12:18:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

* added "select-when-unmatched" flag

* restored "???" to "-"
This commit is contained in:
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 |
| ----| ----| ----| ---- | ----- |
|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text |
|value| binding value | string/number| — | — |
|maxlength| maximum Input text length| number| — | — |
|minlength| minimum Input text length| number | — | — |
|placeholder| placeholder of Input| string | — | — |
|disabled | whether Input is disabled | boolean | — | false |
|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — |
|icon | icon name | string | — | — |
|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 |
|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | - | text |
|value| binding value | string/number| - | - |
|maxlength| maximum Input text length| number| - | - |
|minlength| minimum Input text length| number | - | - |
|placeholder| placeholder of Input| string | - | - |
|disabled | whether Input is disabled | boolean | - | false |
|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | - |
|icon | icon name | string | - | - |
|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 |
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|name | same as `name` in native input | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false |
|max | same as `max` in native input | — | — | — |
|min | same as `min` in native input | — | — | — |
|step| same as `step` in native input | — | — | — |
|resize| control the resizability | string | none, both, horizontal, vertical | — |
|autofocus | same as `autofocus` in native input | boolean | — | false |
|form | same as `form` in native input | string | — | — |
| on-icon-click | hook function when clicking on the input icon | function | — | — |
|name | same as `name` in native input | string | - | - |
| readonly | same as `readonly` in native input | boolean | - | false |
|max | same as `max` in native input | - | - | - |
|min | same as `min` in native input | - | - | - |
|step| same as `step` in native input | - | - | - |
|resize| control the resizability | string | none, both, horizontal, vertical | - |
|autofocus | same as `autofocus` in native input | boolean | - | false |
|form | same as `form` in native input | string | - | - |
| on-icon-click | hook function when clicking on the input icon | function | - | - |
### Input Events
@ -630,22 +630,23 @@ Search data from server-side.
Attribute | Description | Type | Options | Default
|----| ----| ----| ---- | -----|
|placeholder| the placeholder of Autocomplete| string | — | — |
|disabled | whether Autocomplete is disabled | boolean | — | false|
| props | configuration options, see the following table | object | — | — |
|icon | icon name | string | — | — |
|value | binding value | 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) | — | — |
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
| on-icon-click | hook function when clicking on the input icon | function | — | — |
|placeholder| the placeholder of Autocomplete| string | - | - |
|disabled | whether Autocomplete is disabled | boolean | - | false|
| props | configuration options, see the following table | object | - | - |
|icon | icon name | string | - | - |
|value | binding value | 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) | - | - |
| popper-class | custom class name for autocomplete's dropdown | string | - | - |
| trigger-on-focus | whether show suggestions when input focus | boolean | - | true |
| 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
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------- | ------ | ------ | ------ |
| 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 |
| 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 |
### Autocomplete Events

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

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