如何在Element-ui中實(shí)現(xiàn)一個(gè)遠(yuǎn)程搜索功能

這篇文章給大家介紹如何在Element-ui中實(shí)現(xiàn)一個(gè)遠(yuǎn)程搜索功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

方式一

<template>
 <div id="app">
  <!-- 遠(yuǎn)程搜索要使用filterable和remote -->
  <el-select
   v-model="value"
   filterable
   remote
   placeholder="請輸入關(guān)鍵詞"
   :remote-method="remoteMethod"
   :loading="loading"
  >
   <!-- remote-method封裝好的鉤子函數(shù)。當(dāng)用戶在輸入框中輸入內(nèi)容的時(shí)候，會觸發(fā)這個(gè)函數(shù)的執(zhí)行，
   把輸入框?qū)?yīng)的值作為參數(shù)帶給回調(diào)函數(shù)，loading的意思就是遠(yuǎn)程搜索的時(shí)候等待的時(shí)間，即：加載中-->
   <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: {
  // 當(dāng)用戶輸入內(nèi)容開始遠(yuǎn)程搜索模糊查詢的時(shí)候，會觸發(fā)remoteMethod方法
  remoteMethod(query) {
   // 如果用戶輸入內(nèi)容了，就發(fā)請求拿數(shù)據(jù)，遠(yuǎn)程搜索模糊查詢
   if (query !== "") {
    this.loading = true; // 開始拿數(shù)據(jù)嘍
    // 這里模擬發(fā)請求，res就當(dāng)成發(fā)請求返回來的數(shù)據(jù)吧。
    let res = [
     {
      label: "孫悟空",
      value: 500,
     },
     {
      label: "孫尚香",
      value: 18,
     },
     {
      label: "沙和尚",
      value: 1000,
     },
     {
      label: "沙師弟",
      value: 999,
     },
    ];
    this.loading = false // 拿到數(shù)據(jù)嘍
    // 然后把拿到的所有數(shù)據(jù)，首先進(jìn)行一個(gè)過濾，把有關(guān)聯(lián)的過濾成一個(gè)新數(shù)組給到options使用
    this.options = res.filter((item)=>{

     // indexOf等于0代表只要首個(gè)字匹配的，如：搜索 王 王小虎數(shù)據(jù)會被過濾出來，但是 小虎王的數(shù)據(jù)不會被過濾出來。因?yàn)閕ndexOf等于0代表以什么開頭
     // return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0

     // indexOf大于-1代表的是，只要有這個(gè)字出現(xiàn)的即可，如：搜索 王 王小虎、小虎王、小王虎都會被過濾出來。因?yàn)閕ndexOf找不到才會返回-1，
     // 大于-1說明只要有就行，不論是不是開頭也好，中間也好，或者結(jié)尾也好
     return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
    })
   } else {
    this.options = [];
   }
  },
 },
};
</script>

說實(shí)話，我個(gè)人喜歡用方式二。來人吶，上代碼

方式二

<template>
 <div id="app">
  <div>
   <el-autocomplete
    v-model="state2"
    :fetch-suggestions="querySearch"
    placeholder="請輸入內(nèi)容"
    :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: "車?yán)遄?quot;,
     price: "39.99",
    },
    {
     value: "核桃",
     price: "26.36",
    },
    {
     value: "芒果",
     price: "15.78",
    },
   ],
  };
 },
 methods: {
  // 第二步
  // 當(dāng)queryString不為空的時(shí)候，就說明用戶輸入內(nèi)容了，我們把用戶輸入的內(nèi)容在數(shù)據(jù)庫中做對比，如果有能夠模糊關(guān)聯(lián)的，就直接取出
  // 并返回給帶搜索建議的輸入框，輸入框就把返回的數(shù)據(jù)以下拉框的形式呈現(xiàn)出來，供用戶選擇。
  querySearch(queryString, cb) {
   if (queryString != "") {
    // 輸入內(nèi)容以后才去做模糊查詢
    setTimeout(() => {
     let callBackArr = []; // 準(zhǔn)備一個(gè)空數(shù)組，此數(shù)組是最終返給輸入框的數(shù)組
     // 這個(gè)res是發(fā)請求，從后臺獲取的數(shù)據(jù)
     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) => {
      // 把數(shù)據(jù)庫做遍歷，拿用戶輸入的這個(gè)字，和數(shù)據(jù)庫中的每一項(xiàng)做對比
      // if (item.value.indexOf(queryString) == 0) { // 等于0 以什么什么開頭
      if (item.value.indexOf(queryString) > -1) { // 大于-1，只要包含就行，不再乎位置
       // 如果有具有關(guān)聯(lián)性的數(shù)據(jù)
       callBackArr.push(item); // 就存到callBackArr里面準(zhǔn)備返回呈現(xiàn)
      }
     });
     // 經(jīng)過這么一波查詢操作以后，如果這個(gè)數(shù)組還為空，說明沒有查詢到具有關(guān)聯(lián)的數(shù)據(jù)，就直接返回給用戶暫無數(shù)據(jù)
     if (callBackArr.length == 0) {
      cb([{ value: "暫無數(shù)據(jù)", price: "暫無數(shù)據(jù)" }]);
     }
     // 如果經(jīng)過這一波查詢操作以后，找到數(shù)據(jù)了，就把裝有關(guān)聯(lián)數(shù)據(jù)的數(shù)組callBackArr呈現(xiàn)給用戶
     else {
      cb(callBackArr);
     }
    }, 1000);
   }
  },
  // 點(diǎn)擊誰，就把誰放進(jìn)去
  handleSelect(item) {
   this.fruit = []
   this.fruit.push(item)
  },
 },
};
</script>

關(guān)于如何在Element-ui中實(shí)現(xiàn)一個(gè)遠(yuǎn)程搜索功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。