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 "-"

examples/docs/en-US/input.md

@@ -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
 

packages/autocomplete/src/autocomplete.vue

@@ -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;
         }