Table-row-highlighter_0.2.js

This is an example of how to implement table-row-highlightning on key-press with JavaScript.

Related blog-post. - the place for feedback and bug-reports.

About, features, how it works

It attaches to any given table, and then awaits for keypress-events after which it will search through the table for matching rows and adds the class "highlight" to the first matching row.

It has support for multiple characters and customizable timeout. This means that you can start typing a word and it will give you a closer match.

ESC forces a timeout.

It's case-insensitive.

Tested in: Opera 9.64 & 10 beta, Firefox 3.0.10, Safari 3 & 4 beta, IE7

Try it yourself: I've appended a table on the bottom of this page - start writing the name of a country, i.e. Norway.

License

The do-whatever-you-want-license - but I'd like you to keep an reference to me.

Installation

Download the main-script.

Define a CSS-rule for the highlighted rows:

table tr.highlight td { background-color: yellow; }

Activate, preferrable by good event-attaching.

window.onload = function() {
	MIO.highlighter.init(table_element, check_col);
	// i.e.: .init(document.getElementsByTagName("TABLE").item(0), 0) <- will get the first table that appears in the DOM, and check against its first column
}

To-do

Demonstration

Current input

This input-field will reflect your current query

Country Continent Capital