Find feature on web page

srotondo · September 13th, 2011, 02:37 PM

Good afternoon.

I would like to build a browser-like find feature for my web page. The functionality would be the same as when your in your browser and hit control F on your keyboard: you start typing a word and all its locations are highlighted. You can then click "Next" and find the next occurrence of the word you types, etc.

Can this be done with JavaScript?

I want to use this feature to allow my users to search a directory of students at my school. I want to make this find feature part of my web page because not all of my users will know to hit control F to kick off a find feature in a browser.

Any ideas on this?

Thank you for your help.

Sal

joefawcett · September 13th, 2011, 04:10 PM

Well it can be done but is not a trivial task. Why not educate rather than hand hold and just put a message 'Use CTRL+f to search this page'?

srotondo · September 14th, 2011, 07:47 AM

Joe,

Good morning and thank you for your response.

Educating my users would be ideal, but I want the find feature to be obvious--it's a requirement for my users.

What would you recommend as far as coding JavaScript to do the job? Is there something w/ html5 that would help me?

Thank you so much.

Sal

joefawcett · September 14th, 2011, 08:17 AM

Well you'd need to:

Create a dialogue box using a hidden div that has the search box, options and back and forward buttons. It needs to remain in place as the page scrolls
Write a function that examines the text on the page for matches
replace each match with a <span>, suitably styled to highlight, and the original text
Focus on the first created <span>
Have code associated with the back and forward buttons that moves through the newly created <span> elements
Include a button or link that shows the dialogue box created in step 1

Alternatively a message on the page 'Use Ctrl+f' to search this page.

Good luck

srotondo · September 14th, 2011, 08:19 AM

thank you!