One, named Autocompleter.Local, keeps an array of a remote server to give it suggestions—making an Ajax call whenever suggestions need to be retrieved.. server; as a result, its suggesti
Trang 1Using Autocompleter
Autocompletercomes in two flavors One, named Autocompleter.Local, keeps an array of
a remote server to give it suggestions—making an Ajax call whenever suggestions need to
be retrieved
server; as a result, its suggestions will usually appear far more quickly You’ll only want to
client side, or if the logic for picking suggestions is more complicated than an ordinary
string match We’ll cover these cases several pages from now, but for now let’s use the
local version for simplicity’s sake
Using Autocompleter.Local
new Autocompleter.Local(inputElement, updateElement, array, options);
we’ve come to know so well
<script type="text/javascript">
document.observe('dom:loaded', function() {
new Autocompleter.Local('player_name', 'player_suggestions',
['James Polk', 'James Buchanan', 'Franklin Pierce',
'Millard Fillmore', 'Warren Harding', 'Chester Arthur',
'Rutherford Hayes', 'Martin Van Buren']);
});
</script>
Our array contains a short list of nonnotable American presidents—the
benchwarm-ers of our fictional league Rather than make the user choose from an endless drop-down
pos-sible name completions after only a few keystrokes
Figure 12-1
Trang 2Figure 12-1.The autocompleter in its ordinary state
There’s more going on here than would appear Bring up the Firebug pane and move
to the HTML tab (see Figure 12-2)
Figure 12-2.Firebug’s view of the panel that will hold our suggestions
won’t even need to finish the name—two suggestions will appear before you’re done (see Figure 12-3)
Figure 12-3.Two possible completions appear.
Trang 3You should notice two things First, the list of possible suggestions is populated
stripped of all its items
Second, the list looks awful It doesn’t even look like a menu There’s no affordance,
HTML for your list, but leaves the styling up to you Look at the HTML tree in Firebug to
see what I mean:
<div id="player_suggestions">
<ul>
<li class="selected">
<strong>Jame</strong>s Polk
</li>
<li>
<strong>Jame</strong>s Buchanan
</li>
</ul>
</div>
So we know that the individual choices are list items, and that the “active” choice
ele-ment, highlighting the substring that matches what you’ve typed As you type more
characters, the strongly emphasized part of the phrase will grow
We need to style this HTML to look more like the drop-down menus that users are
familiar with It needn’t look exactly like a native drop-down menu, of course, but it
should resemble one enough that a user can recognize its purpose
<style type="text/css">
body {
font: 67.5% "Lucida Grande", Verdana, sans-serif;
}
/* a thin border around the containing DIV */
#player_suggestions {
border: 1px solid #999;
background-color: #fff;
}
Trang 4/* get rid of the bullets and un-indent the list */
#player_suggestions ul {
list-style: none;
margin: 0;
padding: 0;
}
#player_suggestions li {
padding: 2px 3px;
}
#player_suggestions strong {
font-weight: bold;
text-decoration: underline;
}
/* the "active" item will have white text
on a blue background */
#player_suggestions li.selected {
color: #fff;
background-color: #039;
}
</style>
The devil is in the details when you’re trying to make styled HTML look like built-in controls and widgets (see Figure 12-4) If we wanted to do something more elaborate, we could replace the selected item’s background color with a background image—one that has a slight gradient—to give the item some texture (as an homage to Mac OS X) Or we could decrease the opacity of the menu itself, matching the transparency of Windows Vista’s pull-down and drop-down menus It’s up to you HTML is your canvas and you’re Bob Ross
Figure 12-4.CSS makes the list of suggestions look more like a native control.
Time to see what this thing’s made of Bring focus to the text box and start typing
“James” once again Experiment with the several ways you can choose from the menu:
Trang 5• Click a suggestion.
• Use the up/down arrow keys to highlight a suggestion, and then press Enter
• Use the up/down arrow keys to highlight a suggestion, and then press Tab
Now try several ways to dismiss the menu:
• Click outside of the text box or move focus somewhere else with the keyboard
• Press the Escape key
• Finish typing the desired choice For example, if you type “James Buchanan,” the
menu will disappear as you type the final n, since there’s no more completing to
be done
When a user recognizes our list as a drop-down menu, he’ll expect it to act like one.
Robust Autocompleter, the Ajax Version
suggestion bank locally, it gets a list of suggestions from the server This approach has
two large advantages:
• Autocompleter.Localdoes a simple text match against the string In an
autocom-pleter that suggests US cities, when I type “New,” I’ll get offered “New Orleans” and
“New York” (among others) as suggestions
But when I type MSY, the airport code for New Orleans (as can be done on many
travel sites), I receive no suggestions The logic that matches an airport code to a
Ajax.Autocompleterpunts on that logic It tells the server what the user typed and
accepts whatever is returned On the server side, I can do a more complicated
match—I can search for string matches against city names, airport codes, or any
other identifiers I choose
• Ajax.Autocompletermakes perfect sense when dealing with humongous data sets
In our case, we’re pulling from a small list, but a professional football league has
around 30 teams and 53 active players per team—roughly 1,600 players It’s
possi-ble to use Autocompleter.Localwith such a huge data set, but do you really want to
place a 1,600-item array in your page and transfer it over the pipe?
Trang 6To demonstrate Ajax.Autocompleter, we’ll first need to write a script that can return suggestions when it’s called via Ajax
■ Note For this part, you’ll need to be running a web server (either locally or remotely) that supports PHP Naturally, the concept is similar for other server environments
index.htmlfile:
<?php
// For this sample script we'll use another array; in a
// real-world app, we'd probably search a database instead
$suggestions = array(
'James Polk', 'James Buchanan', 'Franklin Pierce',
'Millard Fillmore', 'Warren Harding', 'Chester Arthur',
'Rutherford Hayes', 'Martin Van Buren'
);
$value = isset($_REQUEST['player_name']) ? $_REQUEST['player_name'] : "";
$matches = array();
foreach ($suggestions as $suggestion) {
// Look for a match (case-insensitive)
// If found, wrap the matching part in a STRONG element,
// wrap the whole thing in a LI,
// and add it to the array of matches
if (FALSE !== stripos($suggestion, $value)) {
$match = preg_replace('/' preg_quote($value) '/i',
"<strong>$0</strong>", $suggestion, 1);
$matches[] = "<li>${match}</li>\n";
}
}
// Join the matches into one string, then surround it
// with a UL
echo "<ul>\n" join("", $matches) "</ul>\n";
?>
The output of this PHP script is the literal HTML to be inserted into the page