“Search on this Page” using jQuery

jQueryThis article by guest author Waldek Mastykarz, describes how to use the free javascript library, jQuery, to create specialized search capabilities on large web pages. A followup article will demonstrate how to implement Waldek’s solution in SharePoint using a SharePoint library and the Content Editor Web Part.

Overview

Every modern browser provides the ability to search for text within a page. In most cases that functionality is underserved and allows you to find only one instance of the text at a time. Google Chrome recently presented improved version of search which searches for the given text as you type and highlights all instances found on the current page. But wait a minute: is this functionality limited to Google Chrome only?

The case

In cases where your pages contain large amounts of text, using search to find a particular piece of text might be very useful and help your users get more productive. By highlighting all found instances you make it easier to find the sought after term and the surrounding fragments which might add some relevant context information. The search functionality provided by the web browsers doesn’t know anything about how your website is built. Because it lacks that extra piece of information, it searches for the given text within the whole page instead of the container with the most relevant text. Especially in the case of Intranet Applications, it would increase the productivity of the users if they could search only within the boundaries of the main content wrapper.

JQuery

Alt text: Searching in Internet Explorer (IE) 7: IE7 doesn’t provide find-as-you-type functionality and highlights only one match at a time
JQuery

Alt text: Searching in Firefox 3: while it is possible to enable the find-as-you-type functionality Firefox highlights just like Internet Explorer only one match at a time
JQuery

Alt text: Google Chrome provides by default search-as-you-type and also highlights all occurrences of the sought text. The downside is that you cannot limit the search to a particular region of the page

The requirements

The search should be fired as the user types. To prevent the search from showing too many hits, it should be possible to set the minimal length of the sought text. It should be possible to define a region on the page which contains the most important content, providin only the most relevant results. Last, to keep the functionality reusable across different solutions, it should be unobtrusive.

The solution

JQuery

Alt text: Search on this page using jQuery. Found occurrences of the sought text are being highlighted See it working In the solution above I have chosen for a fully client-side technology approach. It fulfills all requirements and doesn’t introduce any overhead by making calls to logic available on the server. The downside of such approach is dependency on JavaScript – which is an optional technology and can be disabled by the end users. Because we wanted to keep the functionality unobtrusive, the search box will appear only if the JavaScript is enabled, so that users will never face a half-working functionality. I have based the solution on the jQuery library. It’s lightweight, it contains all the components required to make it all working and allows you to focus on the solution itself rather than reinventing the wheel and approaching the JavaScript as we would back in the 90’s. Resources for this solutions: jQuery Web Site jQuery Download

How is it made?

There are only two things required to make it all work: creating a new instance of the Imtech.SearchOnThisPage class and calling the init() function:

JQuery

Alt text: Code for instantiating the search component in JavaScript It’s wrapped in the jQuery ready function because you don’t want to instantiate it before the page has been loaded. In the situation described above you would use the default settings, for example searching for text which contains at least 3 characters. You can modify the default values by setting the parameters just before calling the init() function:
JQuery

Alt text: Configuring the different parameters of the search component In the example above we override the default setting and tell the search component to look for strings that contain at least two characters. The available properties can be found in the script itself:
JQuery

Alt text: Available properties of the search component which can be configured Because the script filters the user input it is possible to search for a string no matter what the applied HTML formatting might be:
JQuery

Alt text: Search component properly highlights found text no matter the applied HTML formatting Still, remember one of the requirements is to limit the search to the particular region of the page only? Check it out:
JQuery

Alt text: Search component doesn’t highlight the text which is located outside the given search boundary Searching for Imtech doesn’t return anything because it is outside the content region we specified while initiating the search component:
JQuery

Alt text: HTML source of text outside the search boundary
JQuery

Alt text: The textWrapper property describes the HTML container which contains the text to search in

Alternatives?

Another plausible approach to fulfill all requirements and provide a similar functionality would be using server-side programming to select the text and AJAX to keep it all from reloading the page each time you type something in. Although it would work, this approach would require custom development, introduce some extra complexity, and would still depend on optional JavaScript technology. Using a fully client-side approach is probably the most efficient way to provide custom search-as-you-type functionality.

What’s next?

The presented case is quite simple but should give you the idea of what you could achieve with it though. While I have used full-text search as an example, you could make the same script search through the facebook of your organization or a catalog of the products you sell. The script I have created is customizable and can be easily extended to suit your situation. Coming next: How to implement the jQuery solution in SharePoint.

20 thoughts on ““Search on this Page” using jQuery”

  1. Great Code! Modified it to jQueryiedly scroll to the first term or to scroll back to the top if there is nothing found:

    However this script is almost completely unusable because of the html code highlighting also!! has anyone found a solution to that?

    For clarification: in the example try searching for ‘str’– this will add the span tag around the character that appear inside the tag in side the HTML

  2. You can see the problem using your example by typing in "str" or even "/.". I thought I had found a fix by adding the code below:

    This isn’t a good enough solution as it doesn’t apply the background to any ‘on screen’ text that matches any html element names.

    Has anyone come up with a suitably robust application of this concept using jQuery?

  3. Has anyone managed to figure out how to exclude element tags? Joyce had this problem back in May last year and I was just wondering if anyone had managed to find a workaround.

    This is a lovely concept, but I am having the same problem where my implementation of the above code is displaying ‘class’ tags and showing text from URIs.

  4. Hi,

    Is there a way to execute a SQL Query (which has a variable input)in a SharePoint site such that when users type anything in a textbox, that value is taken as input for the sql query.

    I want to do it without server-side coding? Any OOTB method???

    Thanks,
    Sid

  5. This is great!

    One problem: is there a way to make this NOT search within tag contents? For example, I have images with width and height attributes specified within the img tag. If I search the word "width," suddenly the contents of the img tag appear visible on the page next to the image and the width attribute name is highlighted. If I search a word in the alt text of an image, the image blows up to be enormous and the alt tag text appears, highlighted. This is rather inconvenient. It’s great that it works for text enclosed in closing and end tags in the #body (as shown in the "cras" example above), but is there any way to discount text within the actual element tags?

    Thanks! Joyce

  6. Did anyone check Dana’s request? Any thoughts on it? I’m thinking of making custom arrays and connecting the selector from the query. Thoughts?
  7. Hi,
    I tried to recreate the example but I can not run anything. I recived am error: Microsoft JScript runtime error: ‘Imtech’ is undefined.
    Does anyone know why is that ?

    Thank you.

  8. Is it possible to assign multiple target (invisible) search terms to
    the final highlighted outcome?

    For example if i were to type in architecture, multiple items will be highlighted in addition to architecture.

    Thank you

    Dana

  9. 1. is it possible to highlight more than one word at a time?

    2. Is it possible to highlight based on words that are not visible.
    For example if a user typed in "architecture’ to the search box, then 4 or 5 items would be highlighted?

    I have target words for each highlightable element, is it possible to include these target words in the search?

    Thank you

    Dana

  10. JQuery – A Fresh Look at What YOU Can Do On SharePoint Without Server Code…

    Client side coding has taken a leap in the right direction, and SharePoint people need to take note….

  11. JQuery – A Fresh Look at What YOU Can Do On SharePoint Without Server Code…

    Client side coding has taken a leap in the right direction, and SharePoint people need to take note….

  12. Larry – For Weekly Newsletter subscribers, the Subscriber Only Archive contains all the downloads. — Mark
  13. ok, my above post has absorbed the html tag that is shown when searching for ‘odio.’

    what you will see is a closing ‘strong’ tag.

  14. I found a bug!

    Using internet explorer 6, I searched for ‘odio’ which works fine, it highlights the bolded text. But when you add a full-stop / period to the end – ‘odio.’ then the formatting of the page changes! You get this;

    Cras odio. Integer placerat jus….

    What’s going on?!

  15. Is there a way to extend the search to more than one term? Or to content that isn’t embedded in the web part?
  16. […] “Search on this Page” using jQuery […]
  17. Nice! One question; this will not take any letters more than A-Z, if i want to include for example nordic letters, å,ä and ö – do you know how? ps, where can i find the original plugin at the jQuery?

Comments are closed.