饿了么ui自带的两种远程搜索（模糊查询）用法讲解

问题描述

有一种查询叫做前端远程搜索、模糊查询。饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。模糊查询是谁来做？

如果后端做

那么前端只需要把用户在输入框中的输入的关键字扔给后端，后端根据前端传过来的用户要查询的关键字，去数据库中进行模糊查询，查到的关联的数据扔给前端，前端拿到数据以后直接呈现给用户看到就行了。前端省事些

如果前端做

正常情况下，模糊查询其实后端做会多一些，因为假设用户输入了一个“王”字，想查询所有带“王”字的数据，如果数据库中有几万条数据，后端一次性把几万条数据扔给前端吗？前端再进行过滤、筛选、查找？这样前端会卡很久，同时数据不准确，因为在前端对后端返回来的数据进行过滤时，可能数据已经发生了改变等各种问题。但是也不是说前端就不能干。本文中分别介绍了饿了么自带的两种方式，我个人比较喜欢第二种方式。话不多说，上代码...

方式一

方式一效果图

输入 “孙” 这个字会出现相关联的数据，也就是模糊查询的意思

说实话，我个人喜欢用方式二。来人呐，上代码

方式二

方式二效果图

总结

两种都差不多，就是请求数据、拿数据、加工过滤数据、呈现数据。本文中的案例是，模糊查询过滤筛选数据是前端来做的，当然也可以让后端来做，具体做项目的时候，可以和后端商量。