ARTICLE AD BOX
I'm trying to make my own little search input selection thing, yet it always says:
"404 not found"
"Not Found
The requested URL was not found on this server.
Apache/2.4.58 (Win64) OpenSSL/3.1.3 PHP/8.2.12 Server at localhost Port 80"
I've tried working out something this works:
<p>The Belgrade Encyclopedia is a website situated in <a href="belgrade.php">Belgrade</a>, Serbia...</p>
Yet this doesn't.
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById("search");
const resultsBox = document.getElementById("search-results");
const pages = [{
name: "Belgrade",
link: "http://localhost/belgrade.php"
},
{
name: "Home",
link: "http://localhost/betah_website.php"
},
{
name: "Serbia",
link: "http://localhost/serbia.php"
}
];
// --- Search box behavior ---
if (searchInput && resultsBox) {
resultsBox.style.display = "none";
searchInput.addEventListener("input", () => {
const query = searchInput.value.trim().toLowerCase();
resultsBox.innerHTML = "";
if (!query) {
resultsBox.style.display = "none";
return;
}
const matches = pages
.filter(p => p.name.toLowerCase().includes(query))
.sort((a, b) =>
a.name.toLowerCase().indexOf(query) - b.name.toLowerCase().indexOf(query)
);
matches.forEach(match => {
const li = document.createElement("li");
const a = document.createElement("a");
a.href = match.link;
a.textContent = match.name;
li.appendChild(a);
resultsBox.appendChild(li);
});
resultsBox.style.display = matches.length ? "block" : "none";
});
}
});
<div class="search-container">
<input
type="text"
id="search"
placeholder="Search…"
autocomplete="off"
/>
<ul id="search-results"></ul>
</div>
