本页为大叶蜷文 Mayabaläba Cqosläpela字典的目录页。
二代搜索框
<div class="search-container">
<input type="text" id="search-box" placeholder="搜索/mayabaläba-cqosläpela/下的网页">
<button onclick="performSearch()">搜索</button>
</div>
<div id="search-results"></div>
<script>
// 伪API数据文件的URL
const searchDataUrl = '/mayabaläba-cqosläpela-search-index.json';
// 获取伪API数据
function fetchData() {
return fetch(searchDataUrl)
.then(response => response.json())
.catch(error => console.error('Error fetching search data:', error));
}
// 执行搜索
function performSearch() {
const searchTerm = document.getElementById('search-box').value.trim();
if (!searchTerm) {
document.getElementById('search-results').innerHTML = '';
return;
}
fetchData().then(data => {
const results = data.filter(item =>
item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
(item.tags && item.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())))
);
displayResults(results);
});
}
// 展示搜索结果
function displayResults(results) {
const resultsContainer = document.getElementById('search-results');
resultsContainer.innerHTML = '';
if (results.length === 0) {
resultsContainer.innerHTML = '<p>没有找到相关结果。</p>';
return;
}
results.forEach(result => {
const resultElement = document.createElement('div');
resultElement.innerHTML = `<a href="${result.url}">${result.title}</a>`;
resultsContainer.appendChild(resultElement);
});
}
</script>
追加随机漫游按钮
<button id="randomButton">随机跳转</button>
// 随机跳转
function randomRedirect() {
fetchData().then(data => {
if (data.length === 0) {
console.error('No data available for random redirect.');
return;
}
const randomIndex = Math.floor(Math.random() * data.length);
const randomItem = data[randomIndex];
window.location.href = randomItem.url;
});
}
// 绑定按钮点击事件
document.getElementById('randomButton').addEventListener('click', randomRedirect);
搜索框
<form action="/search" method="get">
<input type="text" id="search-box" name="q" placeholder="搜索 /mayabaläba-cqosläpela/下的网页">
<button type="submit">搜索</button>
</form>
<div id="search-results"></div>
网页代码
<script>
// 当页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 初始化Lunr索引
var idx = lunr(function() {
this.ref('id');
this.field('title', { boost: 10 });
this.field('content');
});
// 加载索引数据
fetch('/mayabaläba-cqosläpela-search-index.json')
.then(response => response.json())
.then(data => {
data.forEach(function(doc) {
idx.add(doc);
});
})
.catch(error => console.error('Error loading search index:', error));
// 获取搜索框元素
var searchBox = document.getElementById('search-box');
var searchResults = document.getElementById('search-results');
// 添加搜索框的输入事件监听器
searchBox.addEventListener('input', function() {
var query = searchBox.value.trim();
if (!query) {
searchResults.innerHTML = '';
return;
}
// 使用Lunr进行搜索
var results = idx.search(query);
displayResults(results);
});
// 显示搜索结果的函数
function displayResults(results) {
searchResults.innerHTML = '';
results.forEach(function(result) {
var doc = data[result.ref];
var resultElement = document.createElement('div');
resultElement.innerHTML = `<a href="${doc.url}">${doc.title}</a>`;
searchResults.appendChild(resultElement);
});
}
});
</script>