问题形容
有一种查问叫做前端近程搜寻、含糊查问。饿了么自带两种形式能够做，一种是应用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>总结
两种都差不多，就是申请数据、拿数据、加工过滤数据、出现数据。本文中的案例是，含糊查问过滤筛选数据是前端来做的，当然也能够让后端来做，具体做我的项目的时候，能够和后端磋商。