I want to use a search like Ctrl+F in Virtual Tour work. First of all, the address of this study is 360franke.com
I have a single index.html file. Almost all work,
<body>
<div id="viewer" class="fill_viewport"></div>
</body>
It is displayed with this div.
I can find the menu items (eg. Konseptler, Katalog) with ctrl+f in the browser. But I want to redirect it with a search button, not ctrl+f. Many methods I have tried have not worked. Thank you very much in advance for your suggestions.
You can't override the default browser CMD + F functionality; however, a common implementation of this is with CMD + K instead (see this website).
Take a look at this demo:
const ul = document.querySelector('ul');
const search = document.querySelector('input');
// Our epic dummy dataseet
const items = [
{
title: 'foo',
},
{
title: 'bar foo',
},
{
title: 'baz',
},
{
title: 'fizz buzz',
},
{
title: 'baz foo bar',
},
{
title: 'baz bar',
},
{
title: 'buzz foo',
},
{
title: 'foo buzz',
},
];
// Takes an array and populates the list with
// all the elements
const populateItems = (arr) => {
ul.innerHTML = '';
for (const { title } of arr) {
const li = document.createElement('li');
li.textContent = title;
ul.appendChild(li);
}
};
// Display the search bar
showSearch = () => (search.style.display = 'block');
// Hide the search bar
hideSearch = () => (search.style.display = 'none');
const handleKeyDown = ({ key, metaKey, ctrlKey }) => {
// Continue only if they are pressing CMD + K
if (!((metaKey || ctrlKey ) && key === 'k')) return;
// If search is already shown, hide it
if (search.style.display === 'block') return hideSearch();
// Otherwise, show it
showSearch();
search.focus();
// Add a listener so that when use clicks out of the
// search bar, it will disappear
const handleClickOut = ({ target }) => {
if (target === search) return;
hideSearch();
// Remove the event listener after it's been fired
window.removeEventListener('click', handleClickOut);
};
window.addEventListener('click', handleClickOut);
};
// Filters the elements and repopulates
const handleSearch = ({ target }) => {
// If empty string, just repopulate with the full list
if (!target.value) return populateItems(items);
// Else, filter and repopulate with filtered items
const filtered = items.filter(({ title }) => title.includes(target.value));
populateItems(filtered);
};
search.addEventListener('keyup', handleSearch);
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('DOMContentLoaded', () => populateItems(items));input {
position: fixed;
top: 5px;
right: 5px;
display: none;
}<ul></ul>
<input type="search" placeholder="Search for an item..." />Keep in mind that between Mac and Windows, the key people are used to using is different. On Mac, we use CMD, while Windows uses CTRL, so we've covered both cases here.
You just have to capture event and focus the search bar
This code redirects ctrl + F, cmd + F and F3 to an input
window.addEventListener("keydown", (e) => {
if (e.code === 'F3' || ((e.ctrlKey || e.metaKey) && e.code === 'KeyF')) {
e.preventDefault();
const search = document.querySelector('#search')
search.focus()
}
})<input id="search">