Как я могу внедрить Fuse.js в веб -страницу? ⇐ Html

[Anonymous]

(я знаю, что разработке Fuse.js в настоящее время пары лет, но, кажется, все еще кажется эффективным поиском фронта, с новым разработкой, чем LUNR, EclipsElunr и т. Д. Если я бы выиграл от другого поиска JS Пакет, пожалуйста, дайте мне знать.) Поиск работает нормально, но я изо всех сил пытаюсь получить страницу результатов, чтобы показать что -то ценное. Я загрузил последнюю версию Fuse.min.js с страницы Github, и все файлы находятся в одном каталоге папок. Если мой запрос пуст, я успешно получаю сообщение «Пожалуйста, введите поисковый запрос», поэтому я знаю, что эта часть работает. Я не могу сказать, не загружен ли файл fuse.min.js или что -то еще плохо настроено, и поиск документации для начинающих, таких как я, не было таким успешным. Есть ли у меня ошибка или есть более простой способ справиться с тем, что я пытаюсь? Страница результатов: < /p>





Search Results



Search Results


// Get URL query parameters
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}

// Fetch search index and perform search
async function performSearch() {
const query = getQueryParam('query'); // Get the search query from URL
const resultsContainer = document.getElementById('results');

if (!query) {
resultsContainer.innerHTML = '
Please enter a search query.
';
return;
}

// Fetch the JSON index
const response = await fetch('search-index.json');
const index = await response.json();

// Initialize Fuse.js
const fuse = new Fuse(index, {
keys: ['title', 'content'], // Fields to search in
threshold: 0.4, // Adjust based on sensitivity (lower is stricter)
});

// Perform the search
const results = fuse.search(query);

// Display results
if (results.length === 0) {
resultsContainer.innerHTML = '
No results found.
';
} else {
resultsContainer.innerHTML = results
.map(result => {
const { item } = result;
return `

${item.title}
${item.content}

`;
})
.join('');
}
}

// Run the search
performSearch();



< /code>
и файл search-dex.json в настоящее время является простым примером: < /p>
[
{ "id": 1, "title": "Home", "url": "/index.html", "content": "Welcome to the homepage." },
{ "id": 2, "title": "About", "url": "/about.html", "content": "Learn more about us." },
{ "id": 3, "title": "Services", "url": "/services.html", "content": "We offer web development and design services." },
{ "id": 4, "title": "Contact", "url": "/contact.html", "content": "Get in touch with us." }
]


Подробнее здесь: https://stackoverflow.com/questions/793 ... -a-webpage