add props support (#5188)

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 |

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
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|

packages/autocomplete/src/autocomplete-suggestions.vue

@@ -18,7 +18,7 @@
             :class="{'highlighted': parent.highlightedIndex === index}"
             @click="select(item)"
           >
-            {{item.value}}
+            {{item[props.label]}}
           </li>
           <component
             v-else
@@ -52,6 +52,7 @@
     },
 
     props: {
+      props: Object,
       suggestions: Array,
       options: {
         default() {

packages/autocomplete/src/autocomplete.vue

@@ -27,6 +27,7 @@
       </template>
     </el-input>
     <el-autocomplete-suggestions
+      :props="props"
       :class="[popperClass ? popperClass : '']"
       ref="suggestions"
       :suggestions="suggestions"
@@ -52,6 +53,15 @@
     },
 
     props: {
+      props: {
+        type: Object,
+        default() {
+          return {
+            label: 'value',
+            value: 'value'
+          };
+        }
+      },
       popperClass: String,
       placeholder: String,
       disabled: Boolean,
@@ -135,7 +145,7 @@
         }
       },
       select(item) {
-        this.$emit('input', item.value);
+        this.$emit('input', item[this.props.value]);
         this.$emit('select', item);
         this.$nextTick(_ => {
           this.suggestions = [];

test/unit/specs/autocomplete.spec.js

@@ -127,6 +127,69 @@ describe('Autocomplete', () => {
       }, 500);
     }, 500);
   });
+  it('props', done => {
+    vm = createVue({
+      template: `
+        <el-autocomplete
+          v-model="state"
+          ref="autocomplete"
+          :props="{ label: 'address', value: 'name' }"
+          :fetch-suggestions="querySearch"
+          placeholder="请输入内容autocomplete2"
+        ></el-autocomplete>
+      `,
+      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: `