Element-ui 自带的两种远程搜索(模糊查询)用法讲解


Posted in Javascript onJanuary 29, 2021

问题描述

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

如果后端做

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

如果前端做

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

方式一

方式一效果图

Element-ui 自带的两种远程搜索(模糊查询)用法讲解

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

<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>

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

方式二

方式二效果图

Element-ui 自带的两种远程搜索(模糊查询)用法讲解

<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>

总结

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

到此这篇关于Element-ui 自带的两种远程搜索(模糊查询)用法讲解的文章就介绍到这了,更多相关Element-ui 模糊查询内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript之编码规范 推荐
May 23 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
Angular中$compile源码分析
Jan 28 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
小程序实现列表倒计时功能
Jan 29 #Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 #Javascript
vue监听键盘事件的相关总结
Jan 29 #Vue.js
javascript实现拼图游戏
Jan 29 #Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 #Javascript
Javascript实现打鼓效果
Jan 29 #Javascript
JS实现点击掉落特效
Jan 29 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
top.location.href 没有权限 解决方法
2008/08/05 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
开工庆典邀请函范文
2014/01/16 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
交警失职检讨书
2015/01/26 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书