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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
BootStrap中的表单大全
Sep 07 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
微信小程序如何连接Java后台
Aug 08 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
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
一段防盗连的PHP代码
2006/12/06 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
详解js异步文件加载器
2016/01/24 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
浅析node.js中close事件
2014/11/26 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
js HTML5上传示例代码完整版
2016/10/10 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python getopt详解及简单实例
2016/12/30 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python对切片命名的实现方法
2018/10/16 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
社团文化节策划书
2014/02/01 职场文书
营销学习心得体会
2014/09/12 职场文书
中秋节感想
2015/08/10 职场文书
2015年教师节广播稿
2015/08/19 职场文书