大须大镜 | Mayahilwa Mayakimhemot/ 目度 Systemedo 目度 Systemedo

大叶蜷文 Mayabaläba Cqosläpela 目度 Systemedo

navigation contents dictionary

本页为大叶蜷文 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>