Paste the below HTML code on your page where you want the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Search - Opens in New Tab</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
background: #0f0f0f;
color: #e0e0e0;
margin: 0;
padding: 20px;
line-height: 1.5;
}
#search-container {
max-width: 600px;
margin: 40px auto;
}
#search-input {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 1px solid #333;
border-radius: 6px;
background: #1a1a1a;
color: white;
box-sizing: border-box;
}
#search-input::placeholder {
color: #888;
}
#search-results {
list-style: none;
padding: 0;
margin: 16px 0 0 0;
}
#search-results li {
margin: 0;
}
#search-results a {
display: block;
padding: 12px 16px;
color: white;
text-decoration: none;
background: #1e1e1e;
border-radius: 6px;
margin-bottom: 8px;
transition: background 0.15s ease;
font-size: 15px;
}
#search-results a:hover {
background: #2a2a2a;
}
#search-results a mark {
background: #444;
color: #fff;
padding: 2px 4px;
border-radius: 3px;
}
.no-results {
color: #888;
padding: 16px;
font-style: italic;
}
</style>
</head>
<body>
<!--
YOUR ACTUAL MENU / NAVIGATION SHOULD GO HERE
The script looks for <a> elements that contain <svg> followed by text
-->
<div id="search-container">
<input
type="text"
id="search-input"
placeholder="Search menu items (case-insensitive)"
autocomplete="off"
>
<ul id="search-results"></ul>
</div>
<script>
function initializeSearch() {
const input = document.getElementById('search-input');
const resultsList = document.getElementById('search-results');
// Collect links that have <svg> followed by text
const links = document.querySelectorAll('a');
const linkData = Array.from(links)
.map(link => {
const svg = link.querySelector('svg');
if (!svg) return null;
let text = '';
let node = svg.nextSibling;
while (node && node !== link) {
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
}
node = node.nextSibling;
}
text = text.trim();
if (!text) return null;
return { text, href: link.href };
})
.filter(Boolean);
// Optional: helps debugging – check browser console (F12)
console.log(`Search index ready: ${linkData.length} items found`);
input.addEventListener('input', (e) => {
const query = e.target.value.trim();
resultsList.innerHTML = '';
if (!query) return;
const regex = new RegExp(query.replace(/[.*+?^${}()|[]\]/g, '\$&'), 'i');
const matches = linkData.filter(item => regex.test(item.text));
if (matches.length === 0) {
const li = document.createElement('li');
li.className = 'no-results';
li.textContent = 'No matching items found';
resultsList.appendChild(li);
return;
}
matches.forEach(item => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = item.href;
a.target = '_blank'; // ← Opens link in new tab
a.rel = 'noopener noreferrer'; // ← Recommended security practice
const highlighted = item.text.replace(regex, match => `<mark>${match}</mark>`);
a.innerHTML = highlighted;
li.appendChild(a);
resultsList.appendChild(li);
});
});
}
document.addEventListener('DOMContentLoaded', initializeSearch);
</script>
</body>
</html>
Paste the below HTML code on your page where you want the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Search - Opens in New Tab</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
background: #0f0f0f;
color: #e0e0e0;
margin: 0;
padding: 20px;
line-height: 1.5;
}
#search-container {
max-width: 600px;
margin: 40px auto;
}
#search-input {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 1px solid #333;
border-radius: 6px;
background: #1a1a1a;
color: white;
box-sizing: border-box;
}
#search-input::placeholder {
color: #888;
}
#search-results {
list-style: none;
padding: 0;
margin: 16px 0 0 0;
}
#search-results li {
margin: 0;
}
#search-results a {
display: block;
padding: 12px 16px;
color: white;
text-decoration: none;
background: #1e1e1e;
border-radius: 6px;
margin-bottom: 8px;
transition: background 0.15s ease;
font-size: 15px;
}
#search-results a:hover {
background: #2a2a2a;
}
#search-results a mark {
background: #444;
color: #fff;
padding: 2px 4px;
border-radius: 3px;
}
.no-results {
color: #888;
padding: 16px;
font-style: italic;
}
</style>
</head>
<body>
<!--
YOUR ACTUAL MENU / NAVIGATION SHOULD GO HERE
The script looks for <a> elements that contain <svg> followed by text
-->
<div id="search-container">
<input
type="text"
id="search-input"
placeholder="Search menu items (case-insensitive)"
autocomplete="off"
>
<ul id="search-results"></ul>
</div>
<script>
function initializeSearch() {
const input = document.getElementById('search-input');
const resultsList = document.getElementById('search-results');
// Collect links that have <svg> followed by text
const links = document.querySelectorAll('a');
const linkData = Array.from(links)
.map(link => {
const svg = link.querySelector('svg');
if (!svg) return null;
let text = '';
let node = svg.nextSibling;
while (node && node !== link) {
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
}
node = node.nextSibling;
}
text = text.trim();
if (!text) return null;
return { text, href: link.href };
})
.filter(Boolean);
// Optional: helps debugging – check browser console (F12)
console.log(`Search index ready: ${linkData.length} items found`);
input.addEventListener('input', (e) => {
const query = e.target.value.trim();
resultsList.innerHTML = '';
if (!query) return;
const regex = new RegExp(query.replace(/[.*+?^${}()|[]\]/g, '\$&'), 'i');
const matches = linkData.filter(item => regex.test(item.text));
if (matches.length === 0) {
const li = document.createElement('li');
li.className = 'no-results';
li.textContent = 'No matching items found';
resultsList.appendChild(li);
return;
}
matches.forEach(item => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = item.href;
a.target = '_blank'; // ← Opens link in new tab
a.rel = 'noopener noreferrer'; // ← Recommended security practice
const highlighted = item.text.replace(regex, match => `<mark>${match}</mark>`);
a.innerHTML = highlighted;
li.appendChild(a);
resultsList.appendChild(li);
});
});
}
document.addEventListener('DOMContentLoaded', initializeSearch);
</script>
</body>
</html>