diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index 3f1843d195..dd0b0b78b8 100644 --- a/examples/docs/en-US/input.md +++ b/examples/docs/en-US/input.md @@ -632,6 +632,7 @@ 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 | — | — | @@ -640,6 +641,12 @@ Attribute | Description | Type | Options | Default | trigger-on-focus | whether show suggestions when input focus | boolean | — | true | | on-icon-click | hook function when clicking on the input icon | function | — | — | +### 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 | + ### Autocomplete Events | Event Name | Description | Parameters | diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md index 5df4b68f01..42168cc621 100644 --- a/examples/docs/zh-CN/input.md +++ b/examples/docs/zh-CN/input.md @@ -793,6 +793,7 @@ export default { |------------- |---------------- |---------------- |---------------------- |-------- | | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | +| props | 配置选项,具体见下表 | object | — | — | | value | 必填值输入绑定值 | string | — | — | | custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — | | fetch-suggestions | 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — | @@ -801,6 +802,12 @@ export default { | on-icon-click | 点击图标的回调函数 | function | — | — | | icon | 输入框尾部图标 | string | — | — | +### props +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------- | ----------------- | ------ | ------ | ------ | +| value | 指定选项的值为选项对象的某个属性值 | string | — | value | +| label | 指定选项标签为选项对象的某个属性值 | string | — | value | + ### Autocomplete Events | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| diff --git a/packages/autocomplete/src/autocomplete-suggestions.vue b/packages/autocomplete/src/autocomplete-suggestions.vue index 85daaf210e..3aa8c5e024 100644 --- a/packages/autocomplete/src/autocomplete-suggestions.vue +++ b/packages/autocomplete/src/autocomplete-suggestions.vue @@ -18,7 +18,7 @@ :class="{'highlighted': parent.highlightedIndex === index}" @click="select(item)" > - {{item.value}} + {{item[props.label]}} { this.suggestions = []; diff --git a/test/unit/specs/autocomplete.spec.js b/test/unit/specs/autocomplete.spec.js index ff4439598f..7b787a284d 100644 --- a/test/unit/specs/autocomplete.spec.js +++ b/test/unit/specs/autocomplete.spec.js @@ -127,6 +127,69 @@ describe('Autocomplete', () => { }, 500); }, 500); }); + it('props', done => { + vm = createVue({ + template: ` + + `, + data() { + return { + restaurants: [], + state: '' + }; + }, + methods: { + querySearch(queryString, cb) { + var restaurants = this.restaurants; + var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; + cb(results); + }, + createFilter(queryString) { + return (restaurant) => { + return (restaurant.value.indexOf(queryString.toLowerCase()) === 0); + }; + }, + loadAll() { + return [ + { 'name': '三全鲜食(北新泾店)', 'address': '长宁区新渔路144号' }, + { 'name': 'Hot honey 首尔炸鸡(仙霞路)', 'address': '上海市长宁区淞虹路661号' }, + { 'name': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' }, + { 'name': '泷千家(天山西路店)', 'address': '天山西路438号' } + ]; + } + }, + mounted() { + this.restaurants = this.loadAll(); + } + }, true); + const autocomplete = vm.$refs.autocomplete; + const elm = vm.$el; + const inputElm = elm.querySelector('input'); + const spy = sinon.spy(); + + autocomplete.$on('select', spy); + inputElm.focus(); + + setTimeout(_ => { + const suggestions = autocomplete.$refs.suggestions.$el; + const suggestionList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li'); + expect(suggestionList[1].innerHTML === '上海市长宁区淞虹路661号'); + suggestionList[1].click(); + setTimeout(_ => { + expect(inputElm.value).to.be.equal('Hot honey 首尔炸鸡(仙霞路)'); + expect(vm.state).to.be.equal('Hot honey 首尔炸鸡(仙霞路)'); + expect(spy.withArgs().calledOnce).to.be.true; + expect(suggestions.style.display).to.be.equal('none'); + done(); + }, 500); + }, 500); + }); it('highlight', done => { vm = createVue({ template: `