当前位置: 首页 > Web前端 > vue.js

饿了么ui自带两种远程搜索(模糊查询)使用说明

时间:2023-03-31 16:20:02 vue.js

问题描述有一种查询叫做前端远程搜索和模糊查询。饿了么有两种实现方式,一种是在el-input中使用el-autocomplete,另一种是使用el-select和el-option。这两个都可以选择,但是具体的实现方式要和后台商量。谁来做模糊查询?如果是后台做的,那么前台只需要将用户在输入框中输入的关键词丢给后台,后台就会根据用户要查询的关键词去数据库进行模糊查询前端,并将找到的关联数据抛给前端,前端拿到数据后,可以直接呈现给用户查看。前端省事。如果前端做的正常的话,后端其实会做更多的模糊查询,因为假设用户输入了一个“王”字,想查询所有带有“王”字的数据。如果数据库中有几万条数据,后端是否一次性向前端抛出几万条数据?前端过滤过滤搜索?这样前端会卡很久,同时数据也会不准确,因为前端过滤后端返回的数据时,可能数据发生了变化等问题。但是不代表前端做不到。本文介绍饿了么自带的两种方式,个人更喜欢第二种方式。话不多说,直接上代码…??…方法一方法一效果图输入“太阳”字样,就会出现关联的数据,也就是模糊查询的意思。说实话,我个人比较喜欢用方法二。来吧,下面是代码方法二和方法二的渲染请输入内容":trigger-on-focus="false"@select="handleSelect"size="small">

    {{item.value}}
总结一下,两者是相似的,就是请求数据,获取数据,处理过滤数据,呈现数据。本文的案例是模糊查询,过滤,过滤数据都是由前端来完成的,当然也可以由后端来完成。做具体项目的时候,可以和后端商量完成。