New to programming, with the help of chat gpt created a html, css, and js search engine that uses Thingiverse API to search for STL-Format files based on characters.
Problem is that at least from what I can see, it's pulling a ceartian number of random files off of thingiverse and then filtering those files based on the characters someone searched. From what I can see, the ammount of files is based on const maxResultsPerPage = 100;. 90% of the time this leads to searches with no results (very bad)
I can change that number so it searches more files yet then it becomes very, very slow. There are millions of files on Thingiverse so I need to find a way for it to preform searches effectively so it can find related files better.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STL Search</title>
</head>
<body>
<h1>STL Search</h1>
<div id="searchContainer">
<label for="searchInput">Enter characters:</label>
<input type="text" id="searchInput" oninput="handleSearchInput()">
<button onclick="performSearch()">Search</button>
</div>
<div id="searchResults"></div>
<script>
let debounceTimer;
const cache = {};
function debounce(func, delay) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
func();
}, delay);
}
function handleSearchInput() {
debounce(performSearch, 300); // Adjust the delay as needed (e.g., 300ms)
}
async function performSearch() {
const characters = document.getElementById('searchInput').value;
const searchResultsContainer = document.getElementById('searchResults');
if (cache[characters]) {
displaySearchResults(cache[characters]);
return;
}
try {
searchResultsContainer.innerHTML = '<p>Loading...</p>';
const apiKey = 'API key goes here';
const maxResultsPerPage = 100;
const apiUrl = `https://api.thingiverse.com/search?q=${characters}&type=things&access_token=${apiKey}&per_page=${maxResultsPerPage}`;
const response = await fetch(apiUrl);
const data = await response.json();
const filteredResults = data.hits.filter(result => result.name.toLowerCase().indexOf(characters.toLowerCase()) !== -1);
searchResultsContainer.innerHTML = '';
cache[characters] = filteredResults;
displaySearchResults(filteredResults);
} catch (error) {
console.error('Error fetching data:', error);
searchResultsContainer.innerHTML = '<p>Error fetching data</p>';
}
}
function displaySearchResults(results) {
const resultsContainer = document.getElementById('searchResults');
resultsContainer.innerHTML = '';
if (results.length === 0) {
resultsContainer.innerHTML = '<p>No results found</p>';
} else {
results.forEach(result => {
const resultElement = document.createElement('div');
resultElement.classList.add('result');
resultElement.innerHTML = `
<a href="${result.public_url}" target="_blank">
<img src="${result.thumbnail}" alt="${result.name}">
<p>${result.name}</p>
</a>
`;
resultsContainer.appendChild(resultElement);
});
}
}
</script>
</body>
</html>
Pagnation and getting help from Chat GPT