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?
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.
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
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
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 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.
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:
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:
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:
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:
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:
Alt text: HTML source of text outside the search boundary
Alt text: The textWrapper property describes the HTML container which contains the text to search in
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.