fungo 推荐使用
fuse.js作为搜索库
配置
-
依赖库
1<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> 2<script src="https://unpkg.com/[email protected]/dist/fuse.min.js"></script> -
数据源
推荐使用 feeds.json 作为数据源
1submit() { 2 fetch("/feeds.json", { 3 method: "GET", 4 headers: { 5 "Content-Type": "application/json", 6 }, 7 }) 8 .then((res) => res.json()) 9 .then((res) => { 10 this.search(res.items); 11 }) 12 .catch((err) => {}); 13} -
优先级
fuse 支持搜索优先级
推荐按 title，summary，content 逐级降低优先级
1search(data) { 2 const options = { 3 includeScore: true, 4 keys: [ 5 { 6 name: "title", 7 weight: 0.5, 8 }, 9 { 10 name: "summary", 11 weight: 0.3, 12 }, 13 { 14 name: "content", 15 weight: 0.2, 16 }, 17 ], 18 }; 19 // Create a new instance of Fuse 20 const fuse = new Fuse(data, options); 21 22 // Now search for 'Man' 23 this.dataList = fuse.search(this.kw); 24}
举例
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 <link rel="stylesheet" href="/assets/css/output.css" />
9 </head>
10 <body>
11 <!-- search box -->
12 <div x-data="x()">
13 <!-- input box-->
14 <input type="text" placeholder="input your keyword" x-model="kw" @keyup="submit" />
15
16 <!-- result box -->
17 <template x-for="(item, index) in dataList" :key="index">
18 <a :href="item.item.url">
19 <p x-text="item.item.title"></p>
20 <p x-text="item.item.summary"></p>
21 </a>
22 </template>
23 </div>
24 <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
25 <script src="https://unpkg.com/[email protected]/dist/fuse.min.js"></script>
26 <script>
27 const x = () => {
28 return {
29 state: 0,
30 kw: "",
31 dataList: [],
32 submit() {
33 fetch("/feeds.json", {
34 method: "GET",
35 headers: {
36 "Content-Type": "application/json",
37 },
38 })
39 .then((res) => res.json())
40 .then((res) => {
41 this.search(res.items);
42 })
43 .catch((err) => {});
44 },
45 x() {
46 this.kw = "";
47 this.dataList = [];
48 },
49 search(data) {
50 const options = {
51 includeScore: true,
52 keys: [
53 {
54 name: "title",
55 weight: 0.5,
56 },
57 {
58 name: "summary",
59 weight: 0.2,
60 },
61 {
62 name: "content",
63 weight: 0.3,
64 },
65 ],
66 };
67
68 // Create a new instance of Fuse
69 const fuse = new Fuse(data, options);
70
71 // Now search for 'Man'
72 this.dataList = fuse.search(this.kw);
73 },
74 };
75 };
76 </script>
77 </body>
78</html>