npm install fuse.js    

import Fuse from 'fuse.js'

<template>
  <div class="hello">
    <el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-option
      remote placeholder="Search" class="header-search-select" @change="change">
      <el-option v-for="option in search_result" :key="option.item.title" :value="option.item.title"
      :label="option.item.author.firstName" />
    </el-select>
  </div>
</template>

//初始化搜索引擎 
const init_search = (list) => {
  fuse.value = new Fuse(list, {
    shouldSort: true,  //是否按分?jǐn)?shù)對結(jié)果列表排序
    threshold: 0.4,    //匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內(nèi)容。
    location: 0,    // 確定文本中預(yù)期找到的模式的大致位置。
    distance: 100,
    minMatchCharLength: 1, // 模式的最大長度
    //搜索標(biāo)題與作者名
    keys: [{
      name: 'title',
      weight: 0.7    //設(shè)置權(quán)重
    }, {
      name: 'author.firstName',
      weight: 0.3    //設(shè)置權(quán)重
    }]
  })
}

search_all.value = [
  {
    title: "Java虛擬機",
    author: {
      firstName: "王浩",
      lastName: "wanghao"
    }
  },
  {
    title: "人工智能",
    author: {
      firstName: "侯建軍",
      lastName: "marquis"
    }
  }
]

<template>
  <div class="hello">
    <el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-option
      remote placeholder="Search" class="header-search-select" @change="change">
      <el-option v-for="option in search_result" :key="option.item.title" :value="option.item.title"
      :label="option.item.author.firstName" />
    </el-select>
  </div>
</template>

<script setup name="HelloWorld">
import { ref } from '@vue/reactivity'
import Fuse from 'fuse.js'

const fuse = ref(undefined)

//待全文搜索的全部數(shù)據(jù) 
const search_all = ref([])
//搜索的結(jié)果 
const search_result = ref([])
//后面的value的數(shù)據(jù)可以和后臺返回的數(shù)據(jù)進行結(jié)核,形成遠(yuǎn)程搜索 
search_all.value = [
  {
    title: "Java虛擬機",
    author: {
      firstName: "王浩",
      lastName: "wanghao"
    }
  },
  {
    title: "人工智能",
    author: {
      firstName: "侯建軍",
      lastName: "marquis"
    }
  }
]
//搜索前出發(fā) 
const querySearch = (search_value) =>{
  if(search_value === ''){
    search_result.value = []
  }else{
    search_result.value = fuse.value.search(search_value)
    console.log( search_result.value);
  }
}

//初始化搜索引擎 
const init_search = (list) => {
  fuse.value = new Fuse(list, {
    shouldSort: true,  //是否按分?jǐn)?shù)對結(jié)果列表排序
    threshold: 0.4,    //匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內(nèi)容。
    location: 0,    // 確定文本中預(yù)期找到的模式的大致位置。
    distance: 100,
    minMatchCharLength: 1, // 模式的最大長度
    //搜索標(biāo)題與作者名
    keys: [{
      name: 'title',
      weight: 0.7    //設(shè)置權(quán)重
    }, {
      name: 'author.firstName',
      weight: 0.3    //設(shè)置權(quán)重
    }]
  })
}
//也可以將這個放在created生命周期,這里使用了setup語法糖
init_search(search_all.value)
</script>