Skip to content

Commit a31fdf6

Browse files
CarterLiCarterLi
committed
autocomplete: various improvements
1. add `@change` event ElemeFE#17913 2. don't prevent when suggestions are not visible ElemeFE#17472 3. allow `fetchSuggestions` returns a promise or an array 4. add `show-all-on-focus` prop 5. use tab for selection like enter
1 parent 0f580c5 commit a31fdf6

File tree

3 files changed

+143
-22
lines changed

3 files changed

+143
-22
lines changed

‎examples/docs/zh-CN/input.md‎

Lines changed: 114 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ export default {
305305

306306
根据输入内容提供对应的输入建议
307307

308-
:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
308+
:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。autocomplete支持所有input组件的属性
309309
```html
310310
<el-row class="demo-autocomplete">
311311
<el-col :span="12">
@@ -316,6 +316,8 @@ export default {
316316
:fetch-suggestions="querySearch"
317317
placeholder="请输入内容"
318318
@select="handleSelect"
319+
clearable
320+
:debounce="0"
319321
></el-autocomplete>
320322
</el-col>
321323
<el-col :span="12">
@@ -327,6 +329,7 @@ export default {
327329
placeholder="请输入内容"
328330
:trigger-on-focus="false"
329331
@select="handleSelect"
332+
clearable
330333
></el-autocomplete>
331334
</el-col>
332335
</el-row>
@@ -340,11 +343,107 @@ export default {
340343
};
341344
},
342345
methods: {
343-
querySearch(queryString, cb) {
346+
querySearch(queryString) {
344347
var restaurants = this.restaurants;
345-
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
346-
// 调用 callback 返回建议列表的数据
347-
cb(results);
348+
// 如果无需调用接口，你可以直接返回一个数组
349+
return queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
350+
},
351+
createFilter(queryString) {
352+
return (restaurant) => {
353+
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
354+
};
355+
},
356+
loadAll() {
357+
return [
358+
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
359+
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
360+
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
361+
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
362+
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
363+
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
364+
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
365+
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
366+
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
367+
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
368+
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
369+
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
370+
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
371+
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
372+
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
373+
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
374+
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
375+
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
376+
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
377+
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
378+
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
379+
{ "value": "钱记", "address": "上海市长宁区天山西路" },
380+
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
381+
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
382+
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
383+
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
384+
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
385+
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
386+
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
387+
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
388+
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
389+
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
390+
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
391+
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
392+
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
393+
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
394+
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
395+
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
396+
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
397+
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
398+
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
399+
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
400+
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
401+
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
402+
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
403+
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
404+
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
405+
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
406+
];
407+
},
408+
handleSelect(item) {
409+
console.log(item);
410+
}
411+
},
412+
mounted() {
413+
this.restaurants = this.loadAll();
414+
}
415+
}
416+
</script>
417+
```
418+
:::
419+
420+
### 取得焦点时显示所有备选项
421+
422+
当用户已经选择了某项时再次过滤通常只能得到一条备选项，用处不是很大。这时可以使用`show-all-on-focus`指定获得焦点时显示所有备选项而不基于文本框中的文字过滤
423+
424+
:::demo
425+
```html
426+
<el-autocomplete
427+
class="inline-input"
428+
v-model="state"
429+
:fetch-suggestions="querySearch"
430+
placeholder="请输入内容"
431+
@select="handleSelect"
432+
:debounce="0"
433+
show-all-on-focus
434+
></el-autocomplete>
435+
<script>
436+
export default {
437+
data() {
438+
return {
439+
restaurants: [],
440+
state: '三全鲜食（北新泾店）',
441+
};
442+
},
443+
methods: {
444+
querySearch(queryString) {
445+
var restaurants = this.restaurants;
446+
return queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
348447
},
349448
createFilter(queryString) {
350449
return (restaurant) => {
@@ -469,11 +568,10 @@ export default {
469568
};
470569
},
471570
methods: {
472-
querySearch(queryString, cb) {
571+
querySearch(queryString) {
473572
var restaurants = this.restaurants;
474-
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
475-
// 调用 callback 返回建议列表的数据
476-
cb(results);
573+
// 也可以返回 Promise 作为列表数据
574+
return Promise.resolve(queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants);
477575
},
478576
createFilter(queryString) {
479577
return (restaurant) => {
@@ -627,6 +725,7 @@ export default {
627725
628726
clearTimeout(this.timeout);
629727
this.timeout = setTimeout(() => {
728+
// 也可以使用回调函数
630729
cb(results);
631730
}, 3000 * Math.random());
632731
},
@@ -742,13 +841,14 @@ export default {
742841

743842
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
744843
|------------- |---------------- |---------------- |---------------------- |-------- |
745-
| placeholder | 输入框占位文本 | string | — | — |
746-
| disabled | 禁用 | boolean | — | false |
844+
| placeholder | 输入框占位文本 | string | — | — |
845+
| disabled | 禁用 | boolean | — | false |
846+
| clearable | 是否显示清空图标 | boolean | — | false |
747847
| value-key | 输入建议对象中用于显示的键名 | string | — | value |
748848
| value | 必填值，输入绑定值 | string | — | — |
749849
| debounce | 获取输入建议的去抖延时 | number | — | 300 |
750850
| placement | 菜单弹出位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
751-
| fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
851+
| fetch-suggestions | 返回输入建议的方法。你可以直接返回一个数组的 Promise，也可以当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
752852
| popper-class | Autocomplete 下拉列表的类名 | string | — | — |
753853
| trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
754854
| name | 原生属性 | string | — | — |
@@ -759,6 +859,7 @@ export default {
759859
| hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
760860
| popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |
761861
| highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | — | false |
862+
| show-all-on-focus | 是否在获得焦点时显示全部可选项（不使用输入框中文字过滤） | boolean | — | false |
762863

763864
### Autocomplete Slots
764865
| name | 说明 |
@@ -777,6 +878,7 @@ export default {
777878
| 事件名称 | 说明 | 回调参数 |
778879
|---------|--------|---------|
779880
| select | 点击选中建议项时触发 | 选中建议项 |
881+
| change | 在 Input 值改变时触发 | 输入框中的值 |
780882

781883
### Autocomplete Methods
782884
| 方法名 | 说明 | 参数 |

‎packages/autocomplete/src/autocomplete.vue‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@
1010
<el-input
1111
ref="input"
1212
v-bind="[$props, $attrs]"
13-
@input="handleChange"
13+
@input="handleInput"
14+
@change="handleChange"
1415
@focus="handleFocus"
1516
@blur="handleBlur"
1617
@clear="handleClear"
17-
@keydown.up.native.prevent="highlight(highlightedIndex - 1)"
18-
@keydown.down.native.prevent="highlight(highlightedIndex + 1)"
18+
@keydown.up.native="highlight(highlightedIndex - 1, $event)"
19+
@keydown.down.native="highlight(highlightedIndex + 1, $event)"
1920
@keydown.enter.native="handleKeyEnter"
20-
@keydown.native.tab="close"
21+
@keydown.tab.native="handleKeyEnter"
2122
>
2223
<template slot="prepend" v-if="$slots.prepend">
2324
<slot name="prepend"></slot>
@@ -101,7 +102,10 @@
101102
maxlength: Number,
102103
minlength: Number,
103104
autofocus: Boolean,
104-
fetchSuggestions: Function,
105+
fetchSuggestions: {
106+
type: Function,
107+
required: true
108+
},
105109
triggerOnFocus: {
106110
type: Boolean,
107111
default: true
@@ -130,6 +134,10 @@
130134
highlightFirstItem: {
131135
type: Boolean,
132136
default: false
137+
},
138+
showAllOnFocus: {
139+
type: Boolean,
140+
default: false
133141
}
134142
},
135143
data() {
@@ -173,7 +181,7 @@
173181
return;
174182
}
175183
this.loading = true;
176-
this.fetchSuggestions(queryString, (suggestions) => {
184+
const done = (suggestions) => {
177185
this.loading = false;
178186
if (this.suggestionDisabled) {
179187
return;
@@ -184,9 +192,14 @@
184192
} else {
185193
console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
186194
}
187-
});
195+
};
196+
const result = this.fetchSuggestions(queryString, done);
197+
if (result != null && typeof result === 'object') {
198+
if (Array.isArray(result)) done(result);
199+
if (typeof result.then === 'function') result.then(done);
200+
}
188201
},
189-
handleChange(value) {
202+
handleInput(value) {
190203
this.$emit('input', value);
191204
this.suggestionDisabled = false;
192205
if (!this.triggerOnFocus && !value) {
@@ -196,11 +209,14 @@
196209
}
197210
this.debouncedGetData(value);
198211
},
212+
handleChange(event) {
213+
this.$emit('change', event);
214+
},
199215
handleFocus(event) {
200216
this.activated = true;
201217
this.$emit('focus', event);
202218
if (this.triggerOnFocus) {
203-
this.debouncedGetData(this.value);
219+
this.getData(this.showAllOnFocus ? '' : this.value);
204220
}
205221
},
206222
handleBlur(event) {
@@ -233,8 +249,10 @@
233249
this.highlightedIndex = -1;
234250
});
235251
},
236-
highlight(index) {
252+
highlight(index, event) {
237253
if (!this.suggestionVisible || this.loading) { return; }
254+
if (event) event.preventDefault();
255+
238256
if (index < 0) {
239257
this.highlightedIndex = -1;
240258
return;

‎packages/input/src/input.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -409,6 +409,7 @@
409409
this.$emit('input', '');
410410
this.$emit('change', '');
411411
this.$emit('clear');
412+
this.focus();
412413
},
413414
handlePasswordVisible() {
414415
this.passwordVisible = !this.passwordVisible;

0 commit comments

Comments
 (0)