CODEWITHSUNDEEP
wordpresssearchcommandhighlight
Tyrii
Tyrii

Reputation: 183

Possible to add search bar that functions like using (command F) or (CTRL F) inside a website

I have a client that wants the function of being able to enter a key word into a search bar and have it start to highlight the results on the page as you are typing (or after you hit search).

This is just like using the ⌘+F function on a Mac (or Ctrl+F on PC) and the browser itself pops up a search box. He doesn't want to have to hit ⌘+F though, or have his customers to have to know that command. He wants to just have a search bar already on that page that he can type into and it start highlighting words.

ANY idea how to do this in WordPress? I've searched the internet and cannot find a tutorial on how to do it.

If not a search box, maybe a button they can click that prompts to pull up command F on a mac or Ctrl+F on a pc?

I am at a loss here and cannot figure this out. Any tips or experience with this, I would be very grateful.

Upvotes: 0

Views: 11504

Answers (2)

B Jody Spedicato
B Jody Spedicato

Reputation: 1

https://codepen.io/b-jody-spedicato/pen/ExNzqQP

<html>
<head>
<script language="JavaScript">
<!--
var TRange=null;
function findString (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {

  // CODE FOR BROWSERS THAT SUPPORT window.find
  strFound=self.find(str);
  if (strFound && self.getSelection && !self.getSelection().anchorNode) {
   strFound=self.find(str)
  }
  if (!strFound) {
   strFound=self.find(str,0,1)
   while (self.find(str,0,1)) continue
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false)
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange()
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
 }
 else if (navigator.appName=="Opera") {
  alert ("Opera browsers not supported, sorry...")
  return;
 }
 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}
//-->
</script>
</head>
<body>
<form name="f1" action="" 
    onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false">
    <input type="text" name=t1 value="" size=20>
    <input type="submit" name=b1 value="find">
    <p>This is some sample text, do a search above to see how the search bar functions.
You can now add your own CSS styling.
</p>
</form>
</body>
</html>

Upvotes: 0

Tyrii
Tyrii

Reputation: 183

So I found this on another thread and it seems to work but it only finds the first occurrence. I need it to highlight all the occurrences. Any idea how to get it to do that?

<p> hello world, hello world, hello world, hello world</p>

<!--BEGIN SEARCH BOX -->

<div class="search_box">
    <form action="" id="form2">
        <div>
            <input type="text" id="search">
            <input type="button" id="submit_form" onclick="checkInput()" value="Submit">
        </div>
    </form>
</div>

<!--END SEARCH BOX -->
<script>
    function checkInput() {
        var query = document.getElementById('search').value;
        window.find(query);
        return true;
    }
</script>

Upvotes: 1

Related Questions