Add JavaScript Behavior to your existing Sinatra App. You will be adding the functionality to allow users to type search term into an input field and click a button to search the students page and highlight content.
-
First use git to create a new feature branch called search-box. Checkout this branch and use it to build the serach box feature.
-
In your index page that lists all students create a text input and button to allow users to search the list of students using specific terms.
<!-- SEARCH -->
<div id="search">
<label>search: </label>
<input id="" type="text">
<button id="">find</button>
</div><!-- #search -->
-
Set the input field and button id attributes with a semantic name that you can use to select them with later on using jQuery.
-
Create an 'app.js' file in your ./public/js/app.js folder and make sure to link to it from your index.erb file.
-
Prepare the app.js file using document ready statement you have learned.
-
Use jQuery to create an event listener click() that runs whenever the search button is clicked.
-
The search function mentioned above should get the input from the search_input field.
-
After gathering the users search term, insert it into a jQuery selector statement to look for all students that match the search term. Hint: Make use of jQuery's :contains() and :not() selectors.
-
For all the matching terms in the search apply a jQuery effect or css change of your choice. For example you could highlight the search term or the students div using CSS or yu could apply an animation or fade effect to light up the selected student. Have fun!
-
Bonus: If you complete all of the above try making an alternate solution using jQuery's keyup() to get the search to trigger and update as they type in the search input field. Try to get the serach to be case-insensitive, so both uppercase and lowercase will return the correct matches. Get the form to trigger on the Return key. See link
Useful Lab Resources: