I want to use ctrl+f command with search box

Question

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.

Please clarify what you are trying to do. I'm not sure what "I want to redirect it with a search button, not ctrl+f" means. — WOUNDEDStevenJones, May 10 '22 at 17:32
Additionally, we cannot tell you what did not work with the methods you tried if you don't tell us what you tried. — Domino, May 10 '22 at 17:32

score 3 · Answer 1 · answered May 10 '22 at 17:45

3

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">

answered May 10 '22 at 17:45

Konrad

21,590
4
28
64

This looks very ingenious. But the search bar did not work. What could I be missing? – Kerem Aladağ May 10 '22 at 18:30
https://360franke.com/search_test.htm – Kerem Aladağ May 10 '22 at 18:36

mstephen19 · Answer 2 · 2022-05-10T18:55:18.080

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.

I want to use ctrl+f command with search box

2 Answers2