Skip to content
This repository has been archived by the owner on Sep 28, 2022. It is now read-only.

Commit

Permalink
autocomplete: various improvements
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@CarterLi @ZJL8
CarterLi authored and ZJL8 committed Mar 30, 2020
1 parent 532f166 commit 7b780af
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 22 deletions.
126 changes: 114 additions & 12 deletions examples/docs/zh-CN/input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ export default {

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

:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。autocomplete支持所有input组件的属性
```html
<el-row class="demo-autocomplete">
<el-col :span="12">
Expand All @@ -316,6 +316,8 @@ export default {
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
clearable
:debounce="0"
></el-autocomplete>
</el-col>
<el-col :span="12">
Expand All @@ -327,6 +329,7 @@ export default {
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleSelect"
clearable
></el-autocomplete>
</el-col>
</el-row>
Expand All @@ -340,11 +343,107 @@ export default {
};
},
methods: {
querySearch(queryString, cb) {
querySearch(queryString) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
// 如果无需调用接口，你可以直接返回一个数组
return queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
{ "value": "钱记", "address": "上海市长宁区天山西路" },
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>
```
:::

### 取得焦点时显示所有备选项

当用户已经选择了某项时再次过滤通常只能得到一条备选项，用处不是很大。这时可以使用`show-all-on-focus`指定获得焦点时显示所有备选项而不基于文本框中的文字过滤

:::demo
```html
<el-autocomplete
class="inline-input"
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
:debounce="0"
show-all-on-focus
></el-autocomplete>
<script>
export default {
data() {
return {
restaurants: [],
state: '三全鲜食（北新泾店）',
};
},
methods: {
querySearch(queryString) {
var restaurants = this.restaurants;
return queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
},
createFilter(queryString) {
return (restaurant) => {
Expand Down Expand Up @@ -469,11 +568,10 @@ export default {
};
},
methods: {
querySearch(queryString, cb) {
querySearch(queryString) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
// 也可以返回 Promise 作为列表数据
return Promise.resolve(queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants);
},
createFilter(queryString) {
return (restaurant) => {
Expand Down Expand Up @@ -627,6 +725,7 @@ export default {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
// 也可以使用回调函数
cb(results);
}, 3000 * Math.random());
},
Expand Down Expand Up @@ -742,13 +841,14 @@ export default {

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

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

### Autocomplete Methods
| 方法名 | 说明 | 参数 |
Expand Down
38 changes: 28 additions & 10 deletions packages/autocomplete/src/autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@
<el-input
ref="input"
v-bind="[$props, $attrs]"
@input="handleChange"
@input="handleInput"
@change="handleChange"
@focus="handleFocus"
@blur="handleBlur"
@clear="handleClear"
@keydown.up.native.prevent="highlight(highlightedIndex - 1)"
@keydown.down.native.prevent="highlight(highlightedIndex + 1)"
@keydown.up.native="highlight(highlightedIndex - 1, $event)"
@keydown.down.native="highlight(highlightedIndex + 1, $event)"
@keydown.enter.native="handleKeyEnter"
@keydown.native.tab="close"
@keydown.tab.native="handleKeyEnter"
>
<template slot="prepend" v-if="$slots.prepend">
<slot name="prepend"></slot>
Expand Down Expand Up @@ -101,7 +102,10 @@
maxlength: Number,
minlength: Number,
autofocus: Boolean,
fetchSuggestions: Function,
fetchSuggestions: {
type: Function,
required: true
},
triggerOnFocus: {
type: Boolean,
default: true
Expand Down Expand Up @@ -130,6 +134,10 @@
highlightFirstItem: {
type: Boolean,
default: false
},
showAllOnFocus: {
type: Boolean,
default: false
}
},
data() {
Expand Down Expand Up @@ -173,7 +181,7 @@
return;
}
this.loading = true;
this.fetchSuggestions(queryString, (suggestions) => {
const done = (suggestions) => {
this.loading = false;
if (this.suggestionDisabled) {
return;
Expand All @@ -184,9 +192,14 @@
} else {
console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
}
});
};
const result = this.fetchSuggestions(queryString, done);
if (result != null && typeof result === 'object') {
if (Array.isArray(result)) done(result);
if (typeof result.then === 'function') result.then(done);
}
},
handleChange(value) {
handleInput(value) {
this.$emit('input', value);
this.suggestionDisabled = false;
if (!this.triggerOnFocus && !value) {
Expand All @@ -196,11 +209,14 @@
}
this.debouncedGetData(value);
},
handleChange(event) {
this.$emit('change', event);
},
handleFocus(event) {
this.activated = true;
this.$emit('focus', event);
if (this.triggerOnFocus) {
this.debouncedGetData(this.value);
this.getData(this.showAllOnFocus ? '' : this.value);
}
},
handleBlur(event) {
Expand Down Expand Up @@ -233,8 +249,10 @@
this.highlightedIndex = -1;
});
},
highlight(index) {
highlight(index, event) {
if (!this.suggestionVisible || this.loading) { return; }
if (event) event.preventDefault();
if (index < 0) {
this.highlightedIndex = -1;
return;
Expand Down
1 change: 1 addition & 0 deletions packages/input/src/input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,7 @@
this.$emit('input', '');
this.$emit('change', '');
this.$emit('clear');
this.focus();
},
handlePasswordVisible() {
this.passwordVisible = !this.passwordVisible;
Expand Down

0 comments on commit 7b780af

Please sign in to comment.