Create a select drop down menu with options to sort by: alphabetical ordering by full names, longest quote (most characters), shortest quote (least characters).
-
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 the index.erb view that shows a list of all fellow classmates, insert the code below to create the select menu
<!-- SORT MENU -->
<div id="sort_menu">
<select>
<option value="" selected>---sort by---</option>
<option value="alpha">Alphabetical</option>
<option value="most">Most to Say</option>
<option value="least">Least to Say</option>
</select>
</div><!-- #sort_menu -->
-
If it does not already exist, 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 if there is not already one present in the file.
-
Use jQuery to create an event listener change() that runs whenever the user changes their selection within the sort menu.
-
On the change event you should get val()the input from the select menu.
-
After gathering the users menu option, write a condtional statement that will call a function that will make an AJAX request to the correct URI to get back the appropriate JSON data from the Sinatra App. You must allow this function to accept an argument of uri that will pass in the correct URI needed for the sort option that the user selects. See the following pseudo code as an example:
if sort by name then /?sort_by=name&order=asc
if sort by most to say then /?sort_by=quote_length&order=desc
if sort by least to say then /?sort_by=quote_length
Note: Sorting by alphabetical will return students based on their full name Sorting by most to say and least to say will return results sorted based on their excerpt (quote)