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 -----------------
- jQuery 1.3 : Compact forms (part 3)
- jQuery 1.3 : Compact forms (part 2) - AJAX auto-completion
- jQuery 1.3 : Compact forms (part 1) - Placeholder text for fields
- 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)
 
 
Most View
- Windows 7 : Working with Network Files Offline (part 1) - Activating the Offline Files Feature & Making a File or Folder Available for Offline Use
- Windows Phone 7 : Connecting a Bluetooth Headset
- SQL Server 2008: Administering Database Objects - Working with Tables (part 2) - Primary Key Constraints & Unique Constraints
- SharePoint 2010 : Word Automation Services - Demonstration Scenario (part 3) - Combine Documents Using OpenXML, Converting an OpenXML Document to an Alternative Format
- Windows 7 : Setting Security Permissions on Files and Folders (part 4) - Assigning Standard Permissions
- Exchange Server 2003 : Creating and Managing Address Lists and Recipient Policies (part 3) - Working with Offline Address Lists & Creating and Applying Recipient Policies
- Sharepoint 2007 : Track the Progress of a Workflow
- SharePoint 2007 : Create an Alert on a List or a Library
- SQL Azure : Azure Server Administration (part 2) - Firewall Settings
- SQL Server 2012 : SQL Server Architecture - SQL SERVER’S EXECUTION MODEL AND THE SQLOS
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