Searching for user-inputted string in a page
We will use jQuery to highlight a word entered by the user. The data on the browser can be made available from the server side (or database) as well. For this example, we will use some text in an HTML page. The user will enter a search query in a textbox and after pressing a button all matching words in the content will be highlighted.
Getting ready
Create a folder for this recipe in the Chapter5
directory and name it as Recipe2
.
How to do it...
Open a new file, name it as
index.html
and save it in theRecipe2
folder. Let us begin by writing the markup now. Create some paragraphs and put some text inside them. In the end, place a textbox and two buttons. We have also defined a CSS classhighlight
that will create the highlight effect.<html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style...