jQuery UI Autocomplete - Exercise

Contact Us or call 1-877-932-8228
jQuery UI Autocomplete - Exercise

jQuery UI Autocomplete

Duration: 20 to 30 minutes.

In this exercise, you will add autocomplete functionality to a page to allow users to quickly search for and jump to content farther down on the page.

  1. Open jqy-mobile-ui/Exercises/jqueryui/index.html and jqy-mobile-ui/Exercises/jqueryui/js/load.js in a code editor.
  2. Note that, in index.html, each of the h2s has an appropriate id, so that we can use an anchor in the page address to jump to a desired section: index.html#fruit, index.html#blogtitle, etc. Note that you need make no changes to index.html.
  3. Add code to load.js:
    • Write jQuery code to iterate over all h2s on the page to add a hash (each with a value for keys label and url) to the array for each h2
    • Add autocomplete to the #q field so that when the user starts typing, a suggested list of options ('Fruit', 'Vegetables', 'Blog', etc.) appears.
    • Use autocomplete's select event handler to redirect the user to the appropriate anchor (index.html#fruit, index.html#vegetables, index.html#blogtitle, etc.) when an item is selected from the autocomplete list.
    • Test your work in a browser
  4. Use jQuery UI to animate the background and foreground color table rows in the table (at the bottom of the page) with id #fruits.

Solution:

jqy-mobile-ui/Solutions/jqueryui/js/load.js
$(document).ready(function() {
    //create empty "titles" array
	var titles = [];

    //iterate over all h2s on the page;
    //for each h2, add a hash to the "titles" array,
    //with fields for title (the h2's html) and
    //url (the h2's id)
    $('h2').each(function() {
        titles.push({
        	label: $(this).html(),
        	url: $(this).attr('id')
        })
    });

    //use the "titles" array as the datasource for
    //autocomplete for the #q input field; when the user
    //selects a suggested option, redirect them to the
    //appropriate anchor, jumping down the page to the
    //correct id
    $('#q').autocomplete({
		source: titles,
        select: function( event, ui ) {
          window.location.href = '#'+ui.item.url;
        }
	});

    //animate table row background/foreground color
    //as the user hovers over each row; the first
    //function is the mouse-in event and the second
    //is the mouse-out event
    $('table#fruits tr').hover(
        function() {
            $(this).animate({
                backgroundColor: "#600",
                color: "#fff"
            });
        },
        function() {
            $(this).animate({
                backgroundColor: "#fff",
                color: "#000"
            });
        }
    )
});

If the user were to type "bl" into the "On this page" field, then "Vegetables" and "Blog" should (since both contain the string "bl") appear as options:

jQuery UI autocomplete exercise

We iterate ($('h2').each) over all h2s on the page and, for each one, push a new hash onto the titles array, with fields populated from the text (.html()) and id attribute (.attr('id')) of the respective h2.

With the titles array now populated appropriately, we use it as the source for the jQuery UI autocomplete on the #q input field. We specify the action resulting from the user selecting any of the suggested items with the select event handler, redirecting the user to the appropriate anchor (window.location.href = '#'+ui.item.url).

We use animate to change the background and text color of each row in the #fruits table, changing to a dark red background with white text when moused over, and back to white background with black text when moused out.

Next