In-page search a la Apple Safari

About
This script will add a toolbar to the webpage for seaching on the page it self.

To view a demo press Ctrl + Alt + f (or click here).

The following keyboard shortcuts are available

• Open toolbar - Ctrl + Alt + f
• Close toolbar - esc
• Toggle case sensitivity - Ctrl + Alt + c
• Toggle regex - Ctrl + Alt + r
• Next match - Ctrl + Alt + n
• Previous match - Ctrl + Alt + p

It is designed to work as the native search function in Apple's Safari browser. Additionally support for regular expressions have been added. To much surprise this script actually seems to be faster than Safari's own search feature.

Features
In Internet Explorer the script runs on top of JDC to allow for 99% standard compliant JavaScript. I originally wrote this to see how well JDC performs in a real life scenario. The script heavily modifies the DOM using both node methods and innerHTML and thus provide a good example of what JDC can do. I think it perfrms pretty decent but try it and judge for yourself.

If you look at the code you will see the follwoing methods and properties being used in IE

• Extension to the HTMLElement interface
• addEventListener
• removeEventListener
• dispatchEvent
• CSS style.opacity
• CSS style.cssFloat

It does however contain code only for IE. This is due to IE specific behavoir of PRE tags and INPUT tags of type checkbox. These are special cases that JDC can not handle yet.

The script is tested in IE 6 + 7, Firefox 3, Opera 9.51 and Safari 3 on Windows XP - as the code is standard compliant it should work on Mac and Linux as well. You have the following options for customization

• Load toolbar when page loads or add a shortcut for opening
• Define search region
• Define tags which should never be searched
• Max. number of search results
• Color and opacity level for transparency overlay
• z-index for easy integration
• Input pause dealy before searching

Besides the above you may tweak various style settings in the source. The comments should say when its safe to edit or not.

If you install it on your own site it is very possible that your existing CSS will interfere with the layout of the toolbar. This is easily fixable though and will be included in the next version. Until then you will have to sort it out manually.

Shortcomings

• The CSS could be better in Safari - the input elemetns are not properly aligned. If you are a CSS expert and can fix it please get in touch.
• In IE6 and 7 the CSS could be better when displaying matches. I use an ugly fix to get the toolbar to stay in the top in IE 6 as 'position:fixed' is not supported.
• When using regular expressions the resulting matches may vary from one browser to another. Each browser has its own interpretation of newlines and empty text nodes. Not really a big issue.
• Don't know about iframes. As you can see the Google ads are not searched.
• Text in inputs and textarea are not searched. This is likely possible to implement.
• The search algorithm can be optimized. This first version is just a proof of concept - although it is quite fast. (Beating the native Safari search function :)

Download
Get the search script here. If you want support in IE you also need to download JDC. Turn of caching as it is not needed and select CSS corrections for opacity and cssFloat.

Copyright
The script is licensed as GPLv3 which means it is free to use. I kindly ask you to leave the JSLab logo and link back to my site in the top right corner of the toolbar. I wrote this for free for myself and others to enjoy but I would be happy for more traffic to my site. Donations are definitely also a possibility.

Enjoy the script.