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
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- Sigma 24mm f/1.4 DG HSM Art

- Canon EF11-24mm f/4L USM

- Creative Sound Blaster Roar 2

- Alienware 17 - Dell's Alienware laptops

- Smartwatch : Wellograph

- Xiaomi Redmi 2
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8