Programming4us
         
 
 
Programming

jQuery 1.3 : Compact forms (part 4)

12/14/2010 3:51:19 PM
Populating the search field

Our list of suggestions doesn't do us much good if we can't place them in the search box. To begin with, we'll allow a mouse click to confirm a suggestion:

'success': function(data) {
if (data.length) {
$autocomplete.empty();
$.each(data, function(index, term) {
$('<li></li>').text(term)
.appendTo($autocomplete)
.click(function() {
$('#search-text').val(term);
$autocomplete.hide();
});

});
$autocomplete.show();
}
}

This modification sets the text of the search box to whatever list item was clicked. We also hide the suggestions after this since we are done with them.

Keyboard navigation

Since the user is already at the keyboard, and typing in the search term, it is very convenient to allow the keyboard to control selection from the suggestion list as well. We'll need to keep track of the currently selected item to enable this. First, we can add a helper function that will store the index of the item and perform the necessary visual effects to reveal which item is currently selected:

var selectedItem = null;
var setSelectedItem = function(item) {
selectedItem = item;
if (selectedItem === null) {
$autocomplete.hide();
return;
}
if (selectedItem < 0) {
selectedItem = 0;
}
if (selectedItem >= $autocomplete.find('li').length) {
selectedItem = $autocomplete.find('li').length - 1;
}
$autocomplete.find('li').removeClass('selected')
.eq(selectedItem).addClass('selected');
$autocomplete.show();
};

The selectedItem variable will be set to null whenever no item is selected. By always calling setSelectedItem() to change the value of the variable, we can be sure that the suggestion list is only visible when there is a selected item.

The two tests for the numeric value of selectedItem are present to clamp the results to the appropriate range. Without these tests, selectedItem could end up with any value, even negative ones. This function ensures that the current value of selectedItem is always a valid index in the list of suggestions.

We can now revise our existing code to use the new function:

$('#search-text').attr('autocomplete', 'off').keyup(function() {
$.ajax({
'url': '../search/autocomplete.php',
'data': {'search-text': $('#search-text').val()},
'dataType': 'json',
'type': 'GET',
'success': function(data) {
if (data.length) {
$autocomplete.empty();
$.each(data, function(index, term) {
$('<li></li>').text(term)
.appendTo($autocomplete)
.mouseover(function() {
setSelectedItem(index);
})

.click(function() {
$('#search-text').val(term);
$autocomplete.hide();
});
});
setSelectedItem(0);

}
else {
setSelectedItem(null);

}
}
});
});


This revision has several immediate benefits. First, the suggestion list is hidden when there are no results for a given search. Second, we are able to add a mouseover handler that highlights the item under the mouse cursor. Third, the first item is highlighted immediately when the suggestion list is shown:

Now we need to allow the keyboard keys to change which item is currently active in the list.

Other -----------------
- The Art of SEO : Duplicate Content Issues (part 3)
- The Art of SEO : Duplicate Content Issues (part 2) - How Search Engines Identify Duplicate Content
- The Art of SEO : Duplicate Content Issues (part 1) - Consequences of Duplicate Content
- The Art of SEO : Content Optimization (part 2)
- The Art of SEO : Content Optimization (part 1)
- iPad SDK : New Graphics Functionality - Introducing Dudel (part 2)
- iPad SDK : New Graphics Functionality - Introducing Dudel (part 1)
- iPad SDK : New Graphics Functionality - Bezier Paths
- CSS for Mobile Browsers : Where to Insert the CSS (part 2) - Media queries
- CSS for Mobile Browsers : Where to Insert the CSS (part 1) - Media Filtering
- Developing an SEO-Friendly Website : Keyword Targeting (part 4)
- Developing an SEO-Friendly Website : Keyword Targeting (part 3)
- Developing an SEO-Friendly Website : Keyword Targeting (part 2)
- Developing an SEO-Friendly Website : Keyword Targeting (part 1) - Title Tags
- The Art of SEO : Optimization of Domain Names/URLs
- Cloud Security and Privacy : Regulatory/External Compliance (part 2)
- Cloud Security and Privacy : Regulatory/External Compliance (part 1)
- Developing an SEO-Friendly Website : Root Domains, Subdomains, and Microsites (part 2)
- Developing an SEO-Friendly Website : Root Domains, Subdomains, and Microsites (part 1)
- Parallel Programming with Microsoft .Net : Parallel Aggregation - An Example
 
 
Most View
- Exchange Server 2010 Administration Essentials : Understanding Exchange Server 2010 Organizations (part 1) - How Site-Based Routing Works
- jQuery 1.3 : Working with numeric form data (part 3) - Parsing and formatting currency
- Search Engine Basics : Country-Specific Search Engines
- Windows 7 : Hiding Your Shared Folders
- Migrating Databases and Data to SQL Azure (part 7)
- Windows Home Server 2011 : Setting Up a Fax Server (part 2) - Sending a Fax
- SharePoint 2010 : Change Sorting and Filtering of a List or Library
- Active Directory Domain Services 2008: Delete Password Settings Objects
- Windows 7 : Working at the Command Line (part 1)
- What is New in iPhone SDK 3.2 for the iPad (part 1)
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS