Search HTML page content using Javascript

Home

Written by Andy Sharman Saturday, 06 June 2009 17:17

I was helping a friend on a forum recently, and found quite a nifty tool to help him have a huge downloadable page, and keep the search functionality, and it was by using Javascript to make a Search function loop through the HTML elements within the page and detect the search results and highlight them using CSS. Anyway enough blabber, here is the code:

The Javascript/HTML shows you what you need to put in place for the HTML form when posting (note this is NOT HTML strict valid - only Transitional).

HTML and Javascript search form
1 2 3 4 5 6	<form> <input type="text" size="200" style="padding:2px;" id="text" /> <a href="#" onclick="javascript:void($('body').removeHighlight(). highlight(document.getElementById('text').value)); return false;"> Search</a> </form>

HTML and Javascript search form

<form>
    <input type="text" size="200" style="padding:2px;" id="text" />
    <a href="#" onclick="javascript:void($('body').removeHighlight().
    highlight(document.getElementById('text').value)); return false;">
    Search</a>
</form>

Here is the CSS I used to highlight the text found by the Javascript Search functions.

1
2
3

<style type="text/css">
    .highlight { background-color: yellow }
</style>

Also here are the links to the two Javascript files you will need for the above to work.

You will need jQuery, and a file using the jQuery library jquery.highlight.js

Comments

0 #3 Rachael 2010-02-15 05:05

How comes it doesn't search the page when i click the search word

Quote

0 #2 Andy Sharman 2009-07-12 12:15

Yeah, there seems to be an issue with that, thanks for the feedback though!

Quote

0 #1 Gabor Nagy 2009-07-12 10:41

My Firefox 3.5 hangs up when I click on the highlighter link with an empty highlighter text box.

I think a conditional statement should be placed in the code, that will fix the issue.

Code:

javascript:if (document.getElementById(\'text\').value.length > 0) { void($(\'body\').removeHighlight().highlight(document.getElementById(\'text\').value)); } return false;

Tutorials

Comments

Add comment