乐趣区

关于程序员:饿了么ui自带的两种远程搜索模糊查询用法讲解

问题形容

有一种查问叫做前端近程搜寻、含糊查问。饿了么自带两种形式能够做,一种是应用 el-input 中的 el-autocomplete,另一种是应用 el-select 和 el-option。这两种都能够抉择,然而具体实现的思路形式要和后端磋商。含糊查问是谁来做?

如果后端做

那么前端只须要把用户在输入框中的输出的关键字扔给后端,后端依据前端传过来的用户要查问的关键字,去数据库中进行含糊查问,查到的关联的数据扔给前端,前端拿到数据当前间接出现给用户看到就行了。前端省事些

如果前端做

失常状况下,含糊查问其实后端做会多一些,因为假如用户输出了一个“王”字,想查问所有带“王”字的数据,如果数据库中有几万条数据,后端一次性把几万条数据扔给前端吗?前端再进行过滤、筛选、查找?这样前端会卡很久,同时数据不精确,因为在前端对后端返回来的数据进行过滤时,可能数据曾经产生了扭转等各种问题。然而也不是说前端就不能干。本文中别离介绍了饿了么自带的两种形式,我集体比拟喜爱第二种形式。话不多说,上代码 …

形式一

形式一效果图


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

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

说实话,我集体喜爱用形式二。来人呐,上代码

形式二

形式二效果图

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

总结

两种都差不多,就是申请数据、拿数据、加工过滤数据、出现数据。本文中的案例是,含糊查问过滤筛选数据是前端来做的,当然也能够让后端来做,具体做我的项目的时候,能够和后端磋商。

退出移动版