element中el-autocomplete实现中英文搜索功能

<template>

<div class="input-item">

<!-- 输入下拉搜索模板 -->

<span>客户名称：</span>

<el-autocomplete

size="mini"

v-model="myDataObj.fullName"

:fetch-suggestions="querySearch"

placeholder="请输入内容"

@select="handleSelect"

@focus="customerFocus"

>

<template slot-scope="{ item }">

<div>{{ item.value=item.fullName}}</div>

</template>

</el-autocomplete>

</div>

</template>

<script>

export default {

data() {

return {

myDataObj: {}

};

},

props: ["customList"],

methods: {

// 输入建议

querySearch(queryString, cb) {

var customList = this.customList;

var results = queryString

? customList.filter(this.createFilter(queryString))

: customList;

// 调用 callback 返回建议列表的数据

cb(results);

},

createFilter(queryString) {

return restaurant => {

return (

restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===

0 ||

restaurant.referredToAsAbbr

.toLowerCase()

.indexOf(queryString.toLowerCase()) === 0

);

};

},

// 切换选项

handleSelect(item) {

this.myDataObj = item;

this.$emit("clientInput", this.myDataObj);

},

// 输入框失去焦点

customerFocus(e) {

this.$emit("clientInput", this.myDataObj);

}

}

};

</script>