快捷導(dǎo)航

element中el-autocomplete的常見用法示例

更新時(shí)間：2023年03月30日 08:49:39 作者：糯米w

這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言：

這段時(shí)間突然發(fā)現(xiàn)很少寫博客了，平時(shí)都在平衡工作和休息的時(shí)間，周末也沒動(dòng)過筆，而且更重要的是我找不到寫的內(nèi)容了，在經(jīng)歷的初始的新知識(shí)的學(xué)習(xí)階段后，目前的階段更加轉(zhuǎn)入對(duì)于業(yè)務(wù)的理解，很多模塊在不同項(xiàng)目中都是可以復(fù)用的。而且工作中發(fā)現(xiàn)開發(fā)并不強(qiáng)求特別酷炫的界面效果，更多的是實(shí)用的數(shù)據(jù)展示，因此button，form，table可以說是最常用的，因此后面可能會(huì)用更多的篇幅去說這塊內(nèi)容的知識(shí)。

一、組件介紹

autocomplete是input組件的一個(gè)分支，專門用來處理模糊匹配的相關(guān)知識(shí)，很多時(shí)候用戶希望輸入一個(gè)單詞就可以自動(dòng)匹配到相關(guān)的內(nèi)容，這時(shí)候就是這個(gè)組件發(fā)揮作用的地方了。

官網(wǎng)對(duì)此也有介紹

在這里也能看到官網(wǎng)的相關(guān)介紹

二、基本原理

將輸入的名稱與字典庫進(jìn)行匹配，然后輸出成功字段。

這里的匹配時(shí)存在兩種情況，一種是通過后端接口進(jìn)行匹配，一種是前端進(jìn)行匹配，我的感覺是如果是少量的數(shù)據(jù)可以交給前端，如果數(shù)據(jù)量過大可能后端匹配完了再輸出比較好。

三、具體實(shí)現(xiàn) 【后端實(shí)現(xiàn)法】

因?yàn)樯婕暗浇涌谒灾粫?huì)說一下流程，重點(diǎn)介紹前端實(shí)現(xiàn)。

后端匹配不需要獲取字典，你只需要把前端輸入字符傳給后端，等后端匹配好后把結(jié)果給你，然后你再將結(jié)果返回到頁面就好了。
(querySearch, cb)是固定格式，前者代表輸入的字段，后者是個(gè)方法，代表輸出的結(jié)果

【前端實(shí)現(xiàn)法】

前端實(shí)現(xiàn)的頁面樣式與后端一樣，這里請(qǐng)求的@Select是為了處理選擇后的結(jié)果

因?yàn)槭乔岸俗约禾幚?，所以需要先獲取總字典序，將其存儲(chǔ)在一個(gè)變量里面

這樣可以一進(jìn)入頁面就處理好總字典的內(nèi)容。

具體要講一下這個(gè)querySearch方法中可實(shí)現(xiàn)的內(nèi)容
if--else判斷是看你想不想要用戶不輸入內(nèi)容也進(jìn)行匹配,如果默認(rèn)用戶輸入內(nèi)容才開始匹配,就只要if內(nèi)的內(nèi)容就好(我這里是不輸入也會(huì)匹配)
上文以及提到cb()中輸出返回的結(jié)果,這里results變量就是你想返回的結(jié)果,具體如何根據(jù)你的匹配方法決定,一般都是輸入一個(gè)字符返回匹配到的結(jié)果,但是也可以不這么匹配.
實(shí)現(xiàn)原理是之前定義的list里面有label和name字段,你可以處理用戶輸入的時(shí)候按name字段,輸出的是label字段,這樣就實(shí)現(xiàn)了中英文匹配的情況.需要注意的是匹配的結(jié)果results中的value字段才會(huì)在頁面上展示,如果你最后返回的list沒有這個(gè)字段,頁面上是不會(huì)展示內(nèi)容的,這也讓前端可以實(shí)現(xiàn)自定義展示.

最后想說明的是匹配的方法,有首字母的匹配以及模糊匹配,首字母的就是從頭開始,如果第一個(gè)字符不匹配就放棄,模糊的是如果整個(gè)字符串有能匹配的字段都會(huì)輸出,具體情況可以看演示.
首字母匹配

模糊匹配

具體方法我已經(jīng)封裝了,這里忽略大小寫

handleSelect主要用來處理選中后的結(jié)果,如果不處理默認(rèn)就是list表中的內(nèi)容

四、源碼

<template>
  <div class="autoComplete">
    <el-form style="margin:30px" label-width="180px" label-position="right">
      <el-form-item label="后端進(jìn)行搜索并匹配：">
        <el-autocomplete placeholder="請(qǐng)輸入匹配內(nèi)容" v-model="matchName" :fetch-suggestions="querySearchAsync"></el-autocomplete>
      </el-form-item>
      <el-form-item label="前端自行匹配：">
        <el-autocomplete placeholder="請(qǐng)輸入匹配內(nèi)容" v-model="searchName" :fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'

export default {
  setup () {
    const { proxy } = getCurrentInstance()
    const searchName = ref('')
    const matchName = ref('')
    const totalData = ref([])
    let timeOut = reactive()

    /**獲取總查詢表信息 */
    const getList = () => {
      try {
        // 這里應(yīng)該請(qǐng)求接口
        totalData.value = list
      } catch (error) {
        proxy.$message.error(error.message)
      }
    }

    /**搜索結(jié)果 */
    const querySearch = (querySearch, cb) => {
      let results = []
      if (querySearch) {
        const findout = totalData.value.filter((x) => nameFilter(x, querySearch))
        results = findout.map(x => ({ ...x, value: x.label }))
      } else {
        results = totalData.value.map(x => ({ ...x, value: x.label }))
      }

      console.log(results, '結(jié)果')
      clearTimeout(timeOut)
      timeOut = setTimeout(() => {
        cb(results)
      }, 1000);
    }

    /**選擇的結(jié)果 */
    const handleSelect = (item) => {
      console.log(item, '選擇結(jié)果')
      searchName.value = "[label：" + item.label + "； name：" + item.name + "]"
    }

    /**模糊匹配方法 */
    const nameFilter = (item, querySearch) => {
      return item.label.toLowerCase().match(querySearch.toLowerCase()) ? true : false
    }

    /**首字母匹配法 */
    const firstCharFilter = (item, querySearch) =>
      item.label.toLowerCase().indexOf(querySearch.toLowerCase()) === 0


    /**請(qǐng)求后端接口檢索 */
    const querySearchAsync = (querySearch, cb) => {
      let results = []
      if (querySearch === '') {
        cb(results)
      } else {
        try {
          // 請(qǐng)求接口
          const res = []
          results = res
          cb(results)
        } catch (error) {
          proxy.$message.error(error.message)
        }
      }
    }

    onMounted(() => {
      getList()
    })

    const list = [
      { id: 101, label: "angle", name: "角；角度" },
      { id: 102, label: "ant", name: "螞蟻" },
      { id: 103, label: "apple", name: "蘋果" },
      { id: 104, label: "arch", name: "拱形；弧形" },
      { id: 105, label: "arm", name: "臂" },
      { id: 106, label: "army", name: "軍隊(duì)" },
      { id: 107, label: "baby", name: "嬰兒" },
      { id: 108, label: "bag", name: "袋" },
      { id: 109, label: "ball", name: "球" },
      { id: 122, label: "bone", name: "骨" },
      { id: 123, label: "book", name: "書" },
      { id: 124, label: "boot", name: "靴" },
      { id: 125, label: "bottle", name: "瓶子" },
      { id: 126, label: "box", name: "箱；盒" },
      { id: 127, label: "boy", name: "男孩" },
      { id: 128, label: "brain", name: "腦" },
      { id: 129, label: "brake", name: "煞車" },
      { id: 130, label: "branch", name: "樹枝" },
      { id: 131, label: "brick", name: "磚" },
      { id: 132, label: "bridge", name: "橋" },
      { id: 133, label: "brush", name: "刷子" },
      { id: 134, label: "bucket", name: "水桶" },
      { id: 135, label: "bulb", name: "球莖；燈泡" },
      { id: 136, label: "button", name: "紐扣" },
      { id: 150, label: "clock", name: "時(shí)鐘" },
      { id: 151, label: "cloud", name: "云" },
      { id: 152, label: "coat", name: "外套，大衣" },
      { id: 153, label: "collar", name: "衣領(lǐng)" },
      { id: 154, label: "comb", name: "梳子" },
      { id: 155, label: "cord", name: "繩子" },
      { id: 156, label: "cow", name: "母牛" },
      { id: 157, label: "cup", name: "杯子" },
      { id: 158, label: "curtain", name: "簾；幕" },
      { id: 159, label: "cushion", name: "墊子" },
      { id: 160, label: "dog", name: "狗" },
      { id: 169, label: "eye", name: "眼睛" },
    ]

    return {
      searchName,
      matchName,
      querySearch,
      handleSelect,
      querySearchAsync

    }
  }
}

</script>