• 售前

  • 售后

热门帖子
入门百科

Element-ui 自带的两种远程搜刮(模糊查询)用法教学

[复制链接]
芊芊551 显示全部楼层 发表于 2021-10-25 20:11:51 |阅读模式 打印 上一主题 下一主题
标题描述


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


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


正常环境下,模糊查询实在后端做会多一些,由于假设用户输入了一个“王”字,想查询所有带“王”字的数据,如果数据库中有几万条数据,后端一次性把几万条数据扔给前端吗?前端再进行过滤、筛选、查找?如许前端会卡好久,同时数据禁绝确,由于在前端对后端返返来的数据进行过滤时,大概数据已经发生了改变等各种标题。但是也不是说前端就不能干。本文中分别介绍了饿了么自带的两种方式,我个人比力喜欢第二种方式。话不多说,上代码...
方式一


方式一结果图


输入 “孙” 这个字会出现相关联的数据,也就是模糊查询的意思
  1. <template>
  2. <div id="app">
  3.   <!-- 远程搜索要使用filterable和remote -->
  4.   <el-select
  5.    v-model="value"
  6.    filterable
  7.    remote
  8.    placeholder="请输入关键词"
  9.    :remote-method="remoteMethod"
  10.    :loading="loading"
  11.   >
  12.    <!-- remote-method封装好的钩子函数。当用户在输入框中输入内容的时候,会触发这个函数的执行,
  13.    把输入框对应的值作为参数带给回调函数,loading的意思就是远程搜索的时候等待的时间,即:加载中-->
  14.    <el-option
  15.     v-for="item in options"
  16.     :key="item.value"
  17.     :label="item.label"
  18.     :value="item.value"
  19.    >
  20.    </el-option>
  21.   </el-select>
  22. </div>
  23. </template>
复制代码
  1. <script>
  2. export default {
  3. name: "app",
  4. data() {
  5.   return {
  6.    options: [],
  7.    value: [],
  8.    loading: false,
  9.   };
  10. },
  11. methods: {
  12.   // 当用户输入内容开始远程搜索模糊查询的时候,会触发remoteMethod方法
  13.   remoteMethod(query) {
  14.    // 如果用户输入内容了,就发请求拿数据,远程搜索模糊查询
  15.    if (query !== "") {
  16.     this.loading = true; // 开始拿数据喽
  17.     // 这里模拟发请求,res就当成发请求返回来的数据吧。
  18.     let res = [
  19.      {
  20.       label: "孙悟空",
  21.       value: 500,
  22.      },
  23.      {
  24.       label: "孙尚香",
  25.       value: 18,
  26.      },
  27.      {
  28.       label: "沙和尚",
  29.       value: 1000,
  30.      },
  31.      {
  32.       label: "沙师弟",
  33.       value: 999,
  34.      },
  35.     ];
  36.     this.loading = false // 拿到数据喽
  37.     // 然后把拿到的所有数据,首先进行一个过滤,把有关联的过滤成一个新数组给到options使用
  38.     this.options = res.filter((item)=>{
  39.      // indexOf等于0代表只要首个字匹配的,如:搜索 王 王小虎数据会被过滤出来,但是 小虎王的数据不会被过滤出来。因为indexOf等于0代表以什么开头
  40.      // return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0
  41.      // indexOf大于-1代表的是,只要有这个字出现的即可,如:搜索 王 王小虎、小虎王、小王虎都会被过滤出来。因为indexOf找不到才会返回-1,
  42.      // 大于-1说明只要有就行,不论是不是开头也好,中间也好,或者结尾也好
  43.      return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
  44.     })
  45.    } else {
  46.     this.options = [];
  47.    }
  48.   },
  49. },
  50. };
  51. </script>
复制代码
说实话,我个人喜欢用方式二。来人呐,上代码

方式二


方式二结果图

  1. <template>
  2. <div id="app">
  3.   <div>
  4.    <el-autocomplete
  5.     v-model="state2"
  6.     :fetch-suggestions="querySearch"
  7.     placeholder="请输入内容"
  8.     :trigger-on-focus="false"
  9.     @select="handleSelect"
  10.     size="small"
  11.    ></el-autocomplete>
  12.   </div>
  13.   <div>
  14.    <ul>
  15.     <li v-for="(item, index) in fruit" :key="index">{{ item.value }}</li>
  16.    </ul>
  17.   </div>
  18. </div>
  19. </template>
复制代码
  1. <script>
  2. export default {
  3. name: "app",
  4. data() {
  5.   return {
  6.    state2: "",
  7.    fruit: [
  8.     {
  9.      value: "香蕉",
  10.      price: "8.58",
  11.     },
  12.     {
  13.      value: "车厘子",
  14.      price: "39.99",
  15.     },
  16.     {
  17.      value: "核桃",
  18.      price: "26.36",
  19.     },
  20.     {
  21.      value: "芒果",
  22.      price: "15.78",
  23.     },
  24.    ],
  25.   };
  26. },
  27. methods: {
  28.   // 第二步
  29.   // 当queryString不为空的时候,就说明用户输入内容了,我们把用户输入的内容在数据库中做对比,如果有能够模糊关联的,就直接取出
  30.   // 并返回给带搜索建议的输入框,输入框就把返回的数据以下拉框的形式呈现出来,供用户选择。
  31.   querySearch(queryString, cb) {
  32.    if (queryString != "") {
  33.     // 输入内容以后才去做模糊查询
  34.     setTimeout(() => {
  35.      let callBackArr = []; // 准备一个空数组,此数组是最终返给输入框的数组
  36.      // 这个res是发请求,从后台获取的数据
  37.      const res = [
  38.       {
  39.        value: "苹果",
  40.        price: "13.25",
  41.       },
  42.       {
  43.        value: "苹果1",
  44.        price: "13.25",
  45.       },
  46.       {
  47.        value: "苹果2",
  48.        price: "13.25",
  49.       },
  50.       {
  51.        value: "苹果3",
  52.        price: "13.25",
  53.       },
  54.       {
  55.        value: "苹果4",
  56.        price: "13.25",
  57.       },
  58.       {
  59.        value: "苹果5",
  60.        price: "13.25",
  61.       },
  62.       
  63.      ];
  64.      res.forEach((item) => {
  65.       // 把数据库做遍历,拿用户输入的这个字,和数据库中的每一项做对比
  66.       // if (item.value.indexOf(queryString) == 0) { // 等于0 以什么什么开头
  67.       if (item.value.indexOf(queryString) > -1) { // 大于-1,只要包含就行,不再乎位置
  68.        // 如果有具有关联性的数据
  69.        callBackArr.push(item); // 就存到callBackArr里面准备返回呈现
  70.       }
  71.      });
  72.      // 经过这么一波查询操作以后,如果这个数组还为空,说明没有查询到具有关联的数据,就直接返回给用户暂无数据
  73.      if (callBackArr.length == 0) {
  74.       cb([{ value: "暂无数据", price: "暂无数据" }]);
  75.      }
  76.      // 如果经过这一波查询操作以后,找到数据了,就把装有关联数据的数组callBackArr呈现给用户
  77.      else {
  78.       cb(callBackArr);
  79.      }
  80.     }, 1000);
  81.    }
  82.   },
  83.   // 点击谁,就把谁放进去
  84.   handleSelect(item) {
  85.    this.fruit = []
  86.    this.fruit.push(item)
  87.   },
  88. },
  89. };
  90. </script>
复制代码
总结


两种都差不多,就是哀求数据、拿数据、加工过滤数据、出现数据。本文中的案例是,模糊查询过滤筛选数据是前端来做的,固然也可以让后端来做,具体做项目的时候,可以和后端商量。
到此这篇关于Element-ui 自带的两种远程搜索(模糊查询)用法解说的文章就介绍到这了,更多相关Element-ui 模糊查询内容请搜索草根技能分享以前的文章或继续浏览下面的相关文章盼望大家以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作