共计 3234 个字符，预计需要花费 9 分钟才能阅读完成。
问题形容
有一种查问叫做前端近程搜寻、含糊查问。饿了么自带两种形式能够做，一种是应用 el-input 中的 el-autocomplete，另一种是应用 el-select 和 el-option。这两种都能够抉择，然而具体实现的思路形式要和后端磋商。含糊查问是谁来做？
如果后端做
那么前端只须要把用户在输入框中的输出的关键字扔给后端，后端依据前端传过来的用户要查问的关键字，去数据库中进行含糊查问，查到的关联的数据扔给前端，前端拿到数据当前间接出现给用户看到就行了。前端省事些
如果前端做
失常状况下，含糊查问其实后端做会多一些，因为假如用户输出了一个“王”字，想查问所有带“王”字的数据，如果数据库中有几万条数据，后端一次性把几万条数据扔给前端吗？前端再进行过滤、筛选、查找？这样前端会卡很久，同时数据不精确，因为在前端对后端返回来的数据进行过滤时，可能数据曾经产生了扭转等各种问题。然而也不是说前端就不能干。本文中别离介绍了饿了么自带的两种形式，我集体比拟喜爱第二种形式。话不多说，上代码 …
形式一
形式一效果图
输出“孙”这个字会呈现相关联的数据，也就是含糊查问的意思
<template>
<div id="app">
<!-- 近程搜寻要应用 filterable 和 remote -->
<el-select
v-model="value"
filterable
remote
placeholder="请输出关键词"
:remote-method="remoteMethod"
:loading="loading"
>
<!-- remote-method 封装好的钩子函数。当用户在输入框中输出内容的时候，会触发这个函数的执行，把输入框对应的值作为参数带给回调函数，loading 的意思就是近程搜寻的时候期待的工夫，即：加载中 -->
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template><script>
export default {
name: "app",
data() {
return {options: [],
value: [],
loading: false,
};
},
methods: {
// 当用户输出内容开始近程搜寻含糊查问的时候，会触发 remoteMethod 办法
remoteMethod(query) {
// 如果用户输出内容了，就发申请拿数据，近程搜寻含糊查问
if (query !== "") {
this.loading = true; // 开始拿数据喽
// 这里模仿发申请，res 就当成发申请返回来的数据吧。let res = [
{
label: "孙悟空",
value: 500,
},
{
label: "孙尚香",
value: 18,
},
{
label: "沙和尚",
value: 1000,
},
{
label: "沙师弟",
value: 999,
},
];
this.loading = false // 拿到数据喽
// 而后把拿到的所有数据，首先进行一个过滤，把有关联的过滤成一个新数组给到 options 应用
this.options = res.filter((item)=>{
// indexOf 等于 0 代表只有首个字匹配的，如：搜寻 王 王小虎数据会被过滤出来，然而 小虎王的数据不会被过滤出来。因为 indexOf 等于 0 代表以什么结尾
// return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0
// indexOf 大于 - 1 代表的是，只有有这个字呈现的即可，如：搜寻 王 王小虎、小虎王、小王虎都会被过滤出来。因为 indexOf 找不到才会返回 -1，// 大于 - 1 阐明只有有就行，不论是不是结尾也好，两头也好，或者结尾也好
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
})
} else {this.options = [];
}
},
},
};
</script>说实话，我集体喜爱用形式二。来人呐，上代码
形式二
形式二效果图
<template>
<div id="app">
<div>
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输出内容"
:trigger-on-focus="false"
@select="handleSelect"
size="small"
></el-autocomplete>
</div>
<div>
<ul>
<li v-for="(item, index) in fruit" :key="index">{{item.value}}</li>
</ul>
</div>
</div>
</template><script>
export default {
name: "app",
data() {
return {
state2: "",
fruit: [
{
value: "香蕉",
price: "8.58",
},
{
value: "车厘子",
price: "39.99",
},
{
value: "核桃",
price: "26.36",
},
{
value: "芒果",
price: "15.78",
},
],
};
},
methods: {
// 第二步
// 当 queryString 不为空的时候，就阐明用户输出内容了，咱们把用户输出的内容在数据库中做比照，如果有可能含糊关联的，就间接取出
// 并返回给带搜寻倡议的输入框，输入框就把返回的数据以下拉框的模式出现进去，供用户抉择。querySearch(queryString, cb) {if (queryString != "") {
// 输出内容当前才去做含糊查问
setTimeout(() => {let callBackArr = []; // 筹备一个空数组，此数组是最终返给输入框的数组
// 这个 res 是发申请，从后盾获取的数据
const res = [
{
value: "苹果",
price: "13.25",
},
{
value: "苹果 1",
price: "13.25",
},
{
value: "苹果 2",
price: "13.25",
},
{
value: "苹果 3",
price: "13.25",
},
{
value: "苹果 4",
price: "13.25",
},
{
value: "苹果 5",
price: "13.25",
},
];
res.forEach((item) => {
// 把数据库做遍历，拿用户输出的这个字，和数据库中的每一项做比照
// if (item.value.indexOf(queryString) == 0) { // 等于 0 以什么什么结尾
if (item.value.indexOf(queryString) > -1) { // 大于 -1，只有蕴含就行，不再乎地位
// 如果有具备关联性的数据
callBackArr.push(item); // 就存到 callBackArr 外面筹备返回出现
}
});
// 通过这么一波查问操作当前，如果这个数组还为空，阐明没有查问到具备关联的数据，就间接返回给用户暂无数据
if (callBackArr.length == 0) {cb([{ value: "暂无数据", price: "暂无数据"}]);
}
// 如果通过这一波查问操作当前，找到数据了，就把装有关联数据的数组 callBackArr 出现给用户
else {cb(callBackArr);
}
}, 1000);
}
},
// 点击谁，就把谁放进去
handleSelect(item) {this.fruit = []
this.fruit.push(item)
},
},
};
</script>总结
两种都差不多，就是申请数据、拿数据、加工过滤数据、出现数据。本文中的案例是，含糊查问过滤筛选数据是前端来做的，当然也能够让后端来做，具体做我的项目的时候，能够和后端磋商。
正文完