Question

I am using the following function to filter elements and only display the ones containing the string – sort of search as you type.

var filter = $(this).val();
var count = 0;    
$(SearchableElements).each(function() {
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        // hide
    } else {
        // show matches
        count++;
    }
});​

Demo here

Can you think of any way of highlighting matches in the text? Any wrap in span? Or that would be to much work for jQuery to handle (find, removed wrapped before, wrap new matches)?

Answer 1

Here is something I came up with using this plugin. It is as simple as:

$('#searchable').highlight(filter);

EDIT: Updated link, fixed some issues.