如何在Element-ui中实现一个远程搜索功能

这篇文章给大家介绍如何在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>

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

方式二

<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中实现一个远程搜索功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。