1

My client wants to add a search box on specific pages that will allow their user to search for a product and it will scroll to that text. This way it's easier for her to direct her clients to the right part of the page.

This is easily done using Ctrl-F with the browsers search function. Unfortunately the client wants the search to be part of the site.

Any advice on how to accomplish this? I've struggled to find a wordpress plug-in and any JQuery code I've used around the internet has failed me.

Thanks kindly in advance!

user40823
  • 99
  • 2
  • 9

2 Answers2

5

Not sure about its browser support, but you can call window.find("your query here") to use the browser's Ctrl+F functionality

More info here

kei
  • 18,713
  • 1
  • 32
  • 58
  • Yeah! That is a most simple way (and with a highlight text) using the browser automatically – MrMins Sep 10 '15 at 00:05
0

You can use jQuery's :contains selector.

$("window").scrollTop($("*:contains('search text here'):eq(n)").offset().top);

where n is the nth-match. You can probably get the number of matches first then by pressing enter or tab then scroll to the ++n-th match.

Kelvin Lee
  • 39
  • 5
  • How would I make this JQuery bit wordpress ready? I'd like to give it a shot and see if it works. – user40823 Mar 18 '14 at 18:52
  • You need to add a text field and a function which is called when the value of text field is changed. `$("input#search").change(function(){ $("window").scrollTop($("*:contains('" + $("input#search").val() + "'):eq(0)").offset().top); }); – Kelvin Lee Mar 18 '14 at 18:56
  • I added this to my JQuery but it's not working out: function searchscroll() { $("input#search").change(function(){ $("window").scrollTop($("*:contains('" + $("input#search").val() + "'):eq(0)").offset().top); }); jQuery(document).ready(function () { jQuery(searchscroll); }); – user40823 Mar 18 '14 at 19:27
  • Try $(document) instead of jQuery(document) and and searchscroll() instead of jQuwry(searchscroll) – Kelvin Lee Mar 19 '14 at 04:33
  • Sorry my bad, you have to change `$("window").scrollTop($("*:contains('" + $("input#search").val() + "'):eq(0)").offset().top); });` to `$("window").scrollTop($("*:contains('" + $("input#search").val() + "'):eq(0):last").offset().top); });` – Kelvin Lee Mar 19 '14 at 04:48
  • This worked for me. You can check out [here](http://imspiration.net/so/searchText.htm). – Kelvin Lee Mar 19 '14 at 05:03