I want to use ctrl f command with search box-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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