Skip to content

Commit

Permalink
Merge c7b1988 into 88b5bc6
Browse files Browse the repository at this point in the history
  • Loading branch information
baiyaaaaa committed Jun 4, 2017
2 parents 88b5bc6 + c7b1988 commit 6afd45e
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 2 deletions.
7 changes: 7 additions & 0 deletions examples/docs/en-US/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |||
Expand All @@ -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 |
Expand Down
7 changes: 7 additions & 0 deletions examples/docs/zh-CN/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |||
Expand All @@ -801,6 +802,12 @@ export default {
| on-icon-click | 点击图标的回调函数 | function |||
| icon | 输入框尾部图标 | string |||

### props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ----------------- | ------ | ------ | ------ |
| value | 指定选项的值为选项对象的某个属性值 | string || value |
| label | 指定选项标签为选项对象的某个属性值 | string || value |

### Autocomplete Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
Expand Down
3 changes: 2 additions & 1 deletion packages/autocomplete/src/autocomplete-suggestions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
:class="{'highlighted': parent.highlightedIndex === index}"
@click="select(item)"
>
{{item.value}}
{{item[props.label]}}
</li>
<component
v-else
Expand Down Expand Up @@ -52,6 +52,7 @@
},
props: {
props: Object,
suggestions: Array,
options: {
default() {
Expand Down
12 changes: 11 additions & 1 deletion packages/autocomplete/src/autocomplete.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
</template>
</el-input>
<el-autocomplete-suggestions
:props="props"
:class="[popperClass ? popperClass : '']"
ref="suggestions"
:suggestions="suggestions"
Expand All @@ -52,6 +53,15 @@
},
props: {
props: {
type: Object,
default() {
return {
label: 'value',
value: 'value'
};
}
},
popperClass: String,
placeholder: String,
disabled: Boolean,
Expand Down Expand Up @@ -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 = [];
Expand Down
63 changes: 63 additions & 0 deletions test/unit/specs/autocomplete.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: `
Expand Down

0 comments on commit 6afd45e

Please sign in to comment.