Element-ui⾃带的两种远程搜索（模糊查询）⽤法讲解
问题描述
有⼀种查询叫做前端远程搜索、模糊查询。饿了么⾃带两种⽅式可以做，⼀种是使⽤el-input中的el-autocomplete，另⼀种是使⽤el-lect和el-option。这两种都可以选择，但是具体实现的思路⽅式要和后端商量。模糊查询是谁来做？
如果后端做
那么前端只需要把⽤户在输⼊框中的输⼊的关键字扔给后端，后端根据前端传过来的⽤户要查询的关键字，去数据库中进⾏模糊查询，查到的关联的数据扔给前端，前端拿到数据以后直接呈现给⽤户看到就⾏了。前端省事些
如果前端做
正常情况下，模糊查询其实后端做会多⼀些，因为假设⽤户输⼊了⼀个“王”字，想查询所有带“王”字的数据，如果数据库中有⼏万条数据，后端⼀次性把⼏万条数据扔给前端吗？前端再进⾏过滤、筛选、查找？这样前端会卡很久，同时数据不准确，因为在前端对后端返回来的数据进⾏过滤时，可能数据已经发⽣了改变等各种问题。但是也不是说前端就不能⼲。本⽂中分别介绍了饿了么⾃带的两种⽅式，我个
⼈⽐较喜欢第⼆种⽅式。话不多说，上代码...
⽅式⼀
⽅式⼀效果图
我爱小麻烦输⼊ “孙” 这个字会出现相关联的数据，也就是模糊查询的意思
<template>
<div id="app">
<!-- 远程搜索要使⽤filterable和remote -->
<el-lect
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-lect>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
options: [],
value: [],
loading: fal,
};
},
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 = fal // 拿到数据喽
// 然后把拿到的所有数据，⾸先进⾏⼀个过滤，把有关联的过滤成⼀个新数组给到options使⽤
this.options = res.filter((item)=>{
/
/ indexOf等于0代表只要⾸个字匹配的，如：搜索王王⼩虎数据会被过滤出来，但是⼩虎王的数据不会被过滤出来。因为indexOf等于0代表以什么开头 // return LowerCa().LowerCa()) == 0
// indexOf⼤于-1代表的是，只要有这个字出现的即可，如：搜索王王⼩虎、⼩虎王、⼩王虎都会被过滤出来。因为indexOf找不到才会返回-1，
// ⼤于-1说明只要有就⾏，不论是不是开头也好，中间也好，或者结尾也好
return LowerCa().LowerCa()) > -1
})
} el {
this.options = [];
怀念青春的歌曲}
},
},
};
</script>
说实话，我个⼈喜欢⽤⽅式⼆。来⼈呐，上代码
⽅式⼆
⽅式⼆效果图
<template>
<div id="app">
<div>
<el-autocomplete
小学生生字表v-model="state2"
:
fetch-suggestions="querySearch"
placeholder="请输⼊内容"
:trigger-on-focus="fal"
@lect="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 != "") {
// 输⼊内容以后才去做模糊查询
tTimeout(() => {
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呈现给⽤户
el {
cb(callBackArr);
}
}, 1000);
}
},
// 点击谁，就把谁放进去
handleSelect(item) {
this.fruit = []
this.fruit.push(item)
},
},
};北京租房合同范本
</script>
总结
两种都差不多，就是请求数据、拿数据、加⼯过滤数据、呈现数据。本⽂中的案例是，模糊查询过滤筛选数据是前端来做的，当然也可以让后端来做，具体做项⽬的时候，可以和后端商量。
到此这篇关于Element-ui ⾃带的两种远程搜索(模糊查询)⽤法讲解的⽂章就介绍到这了，更多相关Element-ui 模糊查询内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
