14

Is it possible to programmatically open the web browser's native search dialogue from inside a web page?

And more over, if it's possible, can I programmatically perform a search inside of it?

user7607751
  • 465
  • 7
  • 27
  • 2
    Possible duplicate of [Use Browser Search (Ctrl+F) through a button in website?](https://stackoverflow.com/questions/8080217/use-browser-search-ctrlf-through-a-button-in-website) – jonrsharpe Oct 16 '18 at 12:32
  • 1
    @epascarello, no, the `window.find()` API is a different thing. I'm asking about the native search bar that shows when you manually click Ctrl + F – user7607751 Oct 16 '18 at 12:39
  • I was not referring to window.find, I was just trying to be clear what you want. Native Search to me is when you "COMMAND + OPTION + F" and use the browser search. Not the built in Find Dialog (COMMAND + F). – epascarello Oct 16 '18 at 12:44
  • And this is been asked many times on stackoverflow and the answer is. There is not really a way to trigger it. The method has a parameter to show the dialog, but no browsers seem to really support it. – epascarello Oct 16 '18 at 12:47

2 Answers2

6

There is no way to open browser's utilities like find, extensions, settings, etc using javascript. However, you can create your own search with the prompt window:

const searchBtn = document.getElementById("searchBtn");
const searchElement = document.querySelector("#text"); // Any element you want to search
const backup = searchElement.innerHTML;

searchBtn.addEventListener("click", function () {
  searchElement.innerHTML = backup;

  const search = prompt("Search");
  const text = searchElement.innerHTML.split(" ");

  if (search != null) {
    for (let i = 0; i < text.length; i++) {
      let index = text[i];
      let splitIndex = index.split("");
      if (index.toLowerCase().includes(search.toLowerCase())) {
        for (let si = 0; si < index.length; si++) {
          if (search.toLowerCase().includes(index[si].toLowerCase())) {
            splitIndex[si] = `<mark>${index[si]}</mark>`;
            text[i] = splitIndex.join("");
          }
        }
      }
    }
    searchElement.innerHTML = text.join(" ");
  }
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Search Menu</title>
  </head>
  <body>
    <p id="text">The quick brown fox jumped over the lazy dog.</p>
    <button id="searchBtn">Search</button>
  </body>
</html>

You can also use window.find() to find a string in your page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Search Menu</title>
  </head>
  <body>
    <p id="text">The quick brown fox jumped over the lazy dog.</p>
    <button id="searchBtn">Search</button>
  </body>

  <script type="text/javascript">
    const searchBtn = document.getElementById("searchBtn");

    searchBtn.addEventListener("click", function () {
      const search = prompt("Search");
      const searchResult = window.find(search);
    });
  </script>
</html>
ابن آدم
  • 336
  • 3
  • 14
  • Interesting approach. It doesn't seem to work though: try "searchResult" and it will say "No results found". Also, is there a way to make the search results to be highighted exactly like the native search (e.g. yellow highlight in Chrome)? – brillout Jul 22 '21 at 11:23
  • @brillout I edited the answer. Check the new code. – ابن آدم Jul 23 '21 at 06:02
3

if you mean the browser search inside the page that's triggered using command + f or ctrl + f depending on your OS

you can use the window.find() method and here is a reference for it,

otherwise, if you mean the search bar which contains the URL of the website you can access its value by using window.location.href which will present the current URL

and if you want to do some search you can easily change it to anything just by typing

window.location.href = your_value;
Muhammad Hamdi
  • 113
  • 5
  • 3
    In the comments above the OP already said this wasn't what they're looking for. – Alnitak Oct 16 '18 at 14:40
  • Bounty author here: I'm aware of `window.find()` but what I want (and OP as well) is to trigger the browser search dialog via JavaScript. – brillout Jul 21 '21 at 12:07
  • @brillout it's not clear to me that the Google/web search dialog is what the OP is speaking of. Per one of the OP's comment on the question: "I'm asking about the native search bar that shows when you manually click Ctrl + F" –  Jul 21 '21 at 18:42