// 用戶在大屏中搜索產(chǎn)品名稱
const fuse = new Fuse(products, { keys: ['name', 'code'], threshold: 0.3 })
// 實時過濾顯示匹配的產(chǎn)品

// 搜索技術(shù)文檔
const fuse = new Fuse(docs, { keys: ['title', 'content', 'tags'] })
// 用戶輸入"react hooks"即可找到相關(guān)文檔

// 菜單搜索
const fuse = new Fuse(menus, {
  keys: ['name', 'path', 'description'],
  threshold: 0.4
})
// 輸入"用戶管理"或"user"都能找到用戶管理菜單

// 輸入時實時給出建議
const fuse = new Fuse(hotKeywords, { threshold: 0.2 })
const suggestions = fuse.search(query).slice(0, 5)

const fuse = new Fuse(products, {
  keys: ['name', 'brand', 'category', 'description'],
  threshold: 0.3,
  includeScore: true
})
// "耐克運動鞋"可以匹配到"Nike運動鞋"

const fuse = new Fuse(addresses, {
  keys: ['city', 'district', 'street'],
  ignoreLocation: true
})

const fuse = new Fuse(gameItems, {
  keys: ['name', 'description'],
  threshold: 0.2
})

const fuse = new Fuse(customers, {
  keys: ['name', 'company', 'email', 'phone'],
  threshold: 0.3
})

const fuse = new Fuse(metrics, {
  keys: ['name', 'description', 'tags'],
  threshold: 0.4
})

// 移動端通常需要更寬松的匹配
const fuse = new Fuse(data, {
  threshold: 0.5,  // 更寬松
  ignoreLocation: true
})

npm install fuse.js

<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>

import Fuse from 'fuse.js'

// 1. 準(zhǔn)備數(shù)據(jù)
const books = [
  { title: 'JavaScript 高級程序設(shè)計', author: 'Nicholas C. Zakas' },
  { title: '深入理解 ES6', author: 'Nicholas C. Zakas' },
  { title: 'Vue.js 實戰(zhàn)', author: '梁灝' }
]

// 2. 創(chuàng)建 Fuse 實例
const fuse = new Fuse(books, {
  keys: ['title', 'author']
})

// 3. 搜索
const results = fuse.search('JavaScript')
console.log(results)

[
  {
    item: { title: 'JavaScript 高級程序設(shè)計', author: 'Nicholas C. Zakas' },
    refIndex: 0,
    score: 0.123,
    matches: [
      {
        key: 'title',
        value: 'JavaScript 高級程序設(shè)計',
        indices: [[0, 9]]  // 匹配位置：從0到9
      }
    ]
  }
]

const options = {
  keys: ['title', 'author.name', 'tags']
}

const options = {
  threshold: 0.3  // 適度模糊
}

const options = {
  includeScore: true
}

const options = {
  includeMatches: true
}

const options = {
  minMatchCharLength: 2  // 至少2個字符才搜索
}

const options = {
  shouldSort: true
}

const options = {
  useExtendedSearch: true
}

// 使用擴(kuò)展搜索語法
fuse.search('\'exact match')  // 精確匹配
fuse.search('!term')          // 排除 term

const options = {
  ignoreLocation: true  // 只要包含就匹配，不管位置
}

const options = {
  findAllMatches: true
}

const options = {
  includeScore: true
}

const options = {
  // 搜索閾值：0.0（嚴(yán)格）- 1.0（寬松）
  threshold: 0.3,

  // 包含匹配分?jǐn)?shù)
  includeScore: true,

  // 包含匹配信息（用于高亮）
  includeMatches: true,

  // 搜索字段
  keys: ['title', 'description', 'tags', 'category'],

  // 最小匹配字符長度
  minMatchCharLength: 1,

  // 是否排序
  shouldSort: true,

  // 忽略位置
  ignoreLocation: false,

  // 查找所有匹配
  findAllMatches: false,

  // 擴(kuò)展搜索模式
  useExtendedSearch: false
}

const fuse = new Fuse(data, options)

<template>
  <div class="search-demo">
    <h1>Fuse.js 模糊搜索演示</h1>

    <!-- 搜索輸入 -->
    <div class="search-box">
      <input
        v-model="searchQuery"
        placeholder="輸入關(guān)鍵詞搜索..."
        class="input"
      />

      <!-- 閾值控制滑塊 -->
      <div class="threshold-control">
        <label>模糊度: {{ threshold.toFixed(2) }}</label>
        <input
          type="range"
          v-model.number="threshold"
          min="0"
          max="1"
          step="0.05"
        />
        <span class="desc">{{ thresholdDescription }}</span>
      </div>

      <div class="stats">
        找到 {{ results.length }} 條結(jié)果（共 {{ items.length }} 條）
      </div>
    </div>

    <!-- 搜索結(jié)果 -->
    <div class="results" v-if="searchQuery">
      <div v-for="result in results" :key="result.item.id" class="result-item">
        <h3 v-html="highlight(result.item.title, result.matches, 'title')"></h3>
        <p v-html="highlight(result.item.description, result.matches, 'description')"></p>
        <div class="meta">
          <span class="category">{{ result.item.category }}</span>
          <span class="score">匹配度: {{ result.score.toFixed(2) }}</span>
        </div>
        <div class="tags">
          <span
            v-for="tag in result.item.tags"
            :key="tag"
            v-html="highlight(tag, result.matches, 'tags')"
          ></span>
        </div>
      </div>
    </div>

    <!-- 原始數(shù)據(jù) -->
    <div class="original" v-else>
      <h3>原始數(shù)據(jù)（{{ items.length }} 條）</h3>
      <div v-for="item in items" :key="item.id" class="item">
        <h4>{{ item.title }}</h4>
        <p>{{ item.description }}</p>
        <div class="tags">
          <span v-for="tag in item.tags" :key="tag">{{ tag }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Fuse from 'fuse.js'

export default {
  name: 'FuseDemo',
  data() {
    return {
      searchQuery: '',
      threshold: 0.3,
      items: [
        {
          id: 1,
          title: 'JavaScript 基礎(chǔ)教程',
          description: '學(xué)習(xí) JavaScript 的基礎(chǔ)知識，包括變量、函數(shù)和數(shù)據(jù)類型',
          category: '編程',
          tags: ['javascript', '基礎(chǔ)', '教程']
        },
        {
          id: 2,
          title: 'Vue.js 實戰(zhàn)技巧',
          description: 'Vue.js 實際項目中的高級技巧和最佳實踐分享',
          category: '前端',
          tags: ['vue', '實戰(zhàn)', '技巧']
        },
        {
          id: 3,
          title: 'Node.js 性能優(yōu)化',
          description: '如何優(yōu)化 Node.js 應(yīng)用程序的性能和內(nèi)存使用',
          category: '后端',
          tags: ['nodejs', '性能', '優(yōu)化']
        }
      ],
      fuse: null
    }
  },
  created() {
    this.initFuse()
  },
  watch: {
    threshold() {
      this.initFuse()  // 閾值改變時重新初始化
    }
  },
  computed: {
    // 閾值描述
    thresholdDescription() {
      if (this.threshold <= 0.1) return '精確匹配（嚴(yán)格）'
      if (this.threshold <= 0.3) return '適度模糊（推薦）'
      if (this.threshold <= 0.5) return '較模糊'
      if (this.threshold <= 0.7) return '很模糊'
      return '非常模糊（寬松）'
    },

    // 搜索結(jié)果
    results() {
      if (!this.searchQuery.trim()) return []
      return this.fuse.search(this.searchQuery.trim())
    }
  },
  methods: {
    // 初始化 Fuse
    initFuse() {
      const options = {
        threshold: this.threshold,
        includeScore: true,
        includeMatches: true,
        keys: ['title', 'description', 'tags', 'category'],
        minMatchCharLength: 1,
        shouldSort: true
      }
      this.fuse = new Fuse(this.items, options)
    },

    // 高亮文本
    highlight(text, matches, key) {
      if (!matches || matches.length === 0) return text

      const match = matches.find(m => m.key === key)
      if (!match || !match.indices) return text

      const indices = [...match.indices].sort((a, b) => a[0] - b[0])
      let result = ''
      let lastIndex = 0

      indices.forEach(([start, end]) => {
        if (start < lastIndex) return

        result += text.substring(lastIndex, start)
        result += `<span class="highlight">${text.substring(start, end + 1)}</span>`
        lastIndex = end + 1
      })

      result += text.substring(lastIndex)
      return result
    }
  }
}
</script>

<style scoped>
.search-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.search-box {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 6px;
  outline: none;
}

.input:focus {
  border-color: #42b983;
}

.threshold-control {
  margin-top: 15px;
  padding: 10px;
  background: white;
  border-radius: 6px;
}

.threshold-control input[type="range"] {
  width: 100%;
  margin: 8px 0;
}

.threshold-control .desc {
  color: #42b983;
  font-weight: bold;
  margin-left: 10px;
}

.stats {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.result-item, .item {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.result-item h3, .item h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.result-item p, .item p {
  margin: 8px 0;
  color: #555;
  line-height: 1.6;
}

.meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
}

.category {
  background: #e7f5ff;
  color: #1971c2;
  padding: 2px 8px;
  border-radius: 4px;
}

.score {
  color: #888;
  font-style: italic;
}

.tags {
  margin-top: 8px;
}

.tags span {
  display: inline-block;
  background: #42b983;
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  margin-right: 6px;
  margin-top: 4px;
}

/* 高亮樣式 */
:deep(.highlight) {
  background-color: #ff4444;
  color: white;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
}
</style>

const data = [
  {
    id: 1,
    name: '公司名稱',
    location: {
      city: '北京',
      address: '朝陽區(qū)'
    },
    tags: ['科技', 'AI']
  }
]

const fuse = new Fuse(data, {
  keys: ['name', 'location.city', 'location.address', 'tags']
})

const data = [
  { title: '文章1', tags: ['vue', 'javascript'] }
]

const fuse = new Fuse(data, {
  keys: ['tags']  // 自動搜索數(shù)組中的每個元素
})

const options = {
  getFn: (obj, key) => {
    // 自定義獲取值的邏輯
    return obj[key]
  }
}

const options = {
  useExtendedSearch: true
}

const fuse = new Fuse(data, options)

// 搜索語法
fuse.search('\'exact phrase')  // 精確短語
fuse.search('!exclude')        // 排除
fuse.search('term1|term2')     // 或

// 對于大數(shù)據(jù)集，預(yù)先創(chuàng)建索引
const fuse = new Fuse(largeData, {
  threshold: 0.3,
  includeMatches: true
})

// 復(fù)用實例，避免重復(fù)創(chuàng)建

// 防抖搜索
let timer = null
watch(searchQuery, (newVal) => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    results.value = fuse.search(newVal)
  }, 300)
})

const results = fuse.search(query)
const limited = results.slice(0, 10)  // 只取前10條

const query = 'vue javascript'
const results = fuse.search(query)

if (!query.trim()) return []