测试文件
{
"documents": [
{
"name": "Lunr",
"text": "Like Solr, but much smaller, and not as bright.",
"url": "http://lunr"
},
{
"name": "React",
"text": "A JavaScript library for building user interfaces.",
"url": "http://react"
},
{
"name": "Lodash",
"text": "A modern JavaScript utility library delivering modularity, performance & extras.",
"url": "http://lodash"
}
]
}
常规用法
从http加载一个json，这个就是已经准备好的数据集，是网站所有的内容，索引的构建是在用户的浏览器完成的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/lunr/lunr.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
</head>
<body>
<script>
var idx = null
// 使用$.getJSON()从URL获取JSON数据
$.getJSON('http://127.0.0.1:5500/test.json', function(data) {
// 将获取的JSON数据转换为JavaScript对象
var documents = data.documents
idx = lunr(function () {
this.ref('name')
this.field('text')
this.field('url')
documents.forEach(function (doc) {
this.add(doc)
}, this)
})
})
function search() {
var test = JSON.stringify(idx)
console.log(test)
var query = document.getElementById('search').value
var result = idx.search(query)
console.log(result)
}
</script>
<input type="text" id="search" onkeyup="search()">
</body>
</html>
高级用法
预先构建索引json
//序列化
var serializedIdx = JSON.stringify(idx)
//加载已经构建的json
var idx = lunr.Index.load(JSON.parse(data))
直接加载索引，省略构建索引步骤，加速网页速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/lunr/lunr.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
</head>
<body>
<script>
var documents = null;
$.getJSON('http://127.0.0.1:5500/test.json', function(data) {
// 将获取的JSON数据转换为JavaScript对象
documents = data.documents
//从已经构建好的索引json加载索引
const idxData = "{\"version\":\"2.3.9\",\"fields\":[\"text\",\"url\"],\"fieldVectors\":[[\"text/Lunr\",[0,1.136,1,1.136,2,1.136,3,1.136]],[\"url/Lunr\",[]],[\"text/React\",[4,0.504,5,0.504,6,1.053,7,1.053,8,1.053]],[\"url/React\",[]],[\"text/Lodash\",[4,0.39,5,0.39,9,0.814,10,0.814,11,0.814,12,0.814,13,0.814,14,0.814,15,0.814]],[\"url/Lodash\",[]]],\"invertedIndex\":[[\"\",{\"_index\":14,\"text\":{\"Lodash\":{}},\"url\":{}}],[\"bright\",{\"_index\":3,\"text\":{\"Lunr\":{}},\"url\":{}}],[\"build\",{\"_index\":6,\"text\":{\"React\":{}},\"url\":{}}],[\"deliv\",{\"_index\":11,\"text\":{\"Lodash\":{}},\"url\":{}}],[\"extra\",{\"_index\":15,\"text\":{\"Lodash\":{}},\"url\":{}}],[\"interfac\",{\"_index\":8,\"text\":{\"React\":{}},\"url\":{}}],[\"javascript\",{\"_index\":4,\"text\":{\"React\":{},\"Lodash\":{}},\"url\":{}}],[\"librari\",{\"_index\":5,\"text\":{\"React\":{},\"Lodash\":{}},\"url\":{}}],[\"modern\",{\"_index\":9,\"text\":{\"Lodash\":{}},\"url\":{}}],[\"modular\",{\"_index\":12,\"text\":{\"Lodash\":{}},\"url\":{}}],[\"much\",{\"_index\":1,\"text\":{\"Lunr\":{}},\"url\":{}}],[\"perform\",{\"_index\":13,\"text\":{\"Lodash\":{}},\"url\":{}}],[\"smaller\",{\"_index\":2,\"text\":{\"Lunr\":{}},\"url\":{}}],[\"solr\",{\"_index\":0,\"text\":{\"Lunr\":{}},\"url\":{}}],[\"user\",{\"_index\":7,\"text\":{\"React\":{}},\"url\":{}}],[\"util\",{\"_index\":10,\"text\":{\"Lodash\":{}},\"url\":{}}]],\"pipeline\":[\"stemmer\"]}";
// Parse the JSON data
const idx = lunr.Index.load(JSON.parse(idxData));
// Execute search
const searchResults = idx.search('bright');
// Handle results
searchResults.forEach(function (result) {
console.log(`Name: ${result.ref}`);
//从docments中查找name==result.ref的对象
var findR = documents.find(item => item.name == result.ref);
//这个对象就是我们要的结果，里面有详细的数据，可以根据自己的需求进行处理，显示在界面上
console.log(findR);
});
})
</script>
</body>
</html>
