Pro JavaScript Techniques phần 8 potx

In this chapter you built two add-ons to a typical WordPress-based blogging platform. Specifically, you removed the need for navigating old posts with antiquated links and pagina- tion. Instead, you are loading blocks of posts dynamically while the user is browsing the page. Additionally, if a new post is posted while the user is looking at the page, the post will be added, allowing the user to continue reading without ever leaving the page. Both of these additions allow for the browsing experience to become much more dynamic and fluid, with- out posts being broken up between multiple pages. In the next chapter you will build up an advanced piece of Ajax functionality: an auto- complete search. CHAPTER 11 ■ ENHANCING BLOGS WITH AJAX246 7273ch11final.qxd 11/16/06 8:10 AM Page 246 Autocomplete Search The most important functionality that Ajax technology affords is the ability to create highly inter- active user interfaces, many of which weren’t previously possible. An example of one of these new user interface elements is what’s known as the autocomplete search field. The autocomplete search field is much like a normal text field, but it automatically completes search terms as you begin to type them in. This means that as you’re typing a search query, the client is sending requests to the server (in the background) in an attempt to give you faster and more accurate results. In this chapter I go through each of the components that are needed to build a full auto- complete search. First you’ll see how to construct and lay out the page, followed by how to watch for user input in the text entry field. All of this will hook into a simple Ajax request that will go to a simple server-side database. Examples of Autocomplete Search An autocomplete search field can manifest in a couple different ways. For example, Google has an autocomplete version of its search box called Google Suggest ( http://www.google.com/ webhp?complete=1 ). When you begin typing your search query into the field, it shows you other searches that other users have frequently made, beginning with the same characters that you’ve already typed. An example of an autocomplete search is shown in Figure 12-1. 247 CHAPTER 12 ■ ■ ■ Figure 12-1. An example of what typical autocomplete results look like 7273ch12final.qxd 11/16/06 8:08 AM Page 247 A nother popular example is called Instant Domain Search ( h ttp://instantdomainsearch. com/ ). This particular application lets you know whether a domain name is available to be pur- chased as you type the name. This is different from the Google implementation in that it a utomatically completes the search, as opposed to completing the query itself. This means that as you type a domain name to search for, the server automatically completes your queries in the background, giving you relevant results as you type. An example is shown in Figure 12-2. The final example, and the one that’s most similar to the one that you’ll be building, is the autocomplete mechanism provided by the online bookmarking service del.icio.us ( http://del.icio.us/). It provides a means through which you can tag links with specific words by allowing you to autocomplete multiple words within a single text entry field. An example of this is shown in Figure 12-3. You’re about to build your own autocomplete search. It’ll be a simple form for sending a message to a group of friends on a web site. The autocomplete field will behave very simi- larly to del.icio .us, in that there will be a field for entering usernames, which can then be autocompleted in the background using Ajax. You’ll be able to autocomplete each of your friends’ usernames, based on what’s stored in the central database, into a comma-delimited list of user names to send messages to . An example of the effect that y ou’re going to achieve is shown in Figure 12-4. CHAPTER 12 ■ AUTOCOMPLETE SEARCH248 Figure 12-2. An example of an autocompleted Instant Domain Search Figure 12-3. An example of del.icio.us autocomplete in action, completing a new tag 7273ch12final.qxd 11/16/06 8:08 AM Page 248 Building the Page The first step of building your autocomplete search field is to construct a simple form that will house the complete setup. This page is structured like a simple form for sending a message to a group of users on a web site. There are three important aspects that you need to include on the page, in addition to the normal message-sending form (which consists of a To field and an area for the message that’s being sent): The text entry field: You need to make sure that it has the autocomplete property set to off. This will disable the browser’s default autocomplete mechanism (which autocompletes entries that you’ve previously entered into an input area): <input type="text" id="to" name="to" autocomplete="off"/> The loading image: This is a small spinning image laid on top of the text input field to denote when new data is being loaded from the server: <img src="indicator.gif" id="qloading"/> The results area: All results coming back from the server will be put into a results area and be displayed on demand. The physical results will be returned as a set of <li> elements, each containing information about an individual user: <div id="results"><div class="suggest">Suggestions:</div><ul></ul></div> Both the loading indicator and the results area will be included via JavaScript. The full HTML for the page is shown in Listing 12-1. Listing 12-1. The F ull HTML of the A utocomplete Form for Sending Messages to Users <html> <head> <script src="dom.js"></script> <script src="delay.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"/> </head> CHAPTER 12 ■ AUTOCOMPLETE SEARCH 249 Figure 12-4. An example of a username autocomplete, based on entering a single letter 7273ch12final.qxd 11/16/06 8:08 AM Page 249 < body> <form action="" method="POST" id="auto"> <div id="top"> < div id="mhead"><strong>Send Message</strong></div> <div class="light"> <label>From:</label> <div class="rest from"> <img src="icons/john_icon.jpg"/> <strong>John Resig</strong> </div> </div> <div class="query dark"> <label>To:</label> <div class="rest"> <input type="text" id="to" name="to" autocomplete="off"/> </div> </div> <div class="light"><textarea></textarea></div> <div class="submit"><input type="submit" value="&raquo; Send"/></div> </div> </form> </body> </html> Figure 12-5 shows a screenshot of how the page looks fully styled. The next step, now that you have your form set up and ready for user input, is to watch for the user enter ing infor mation into the user name text entry field and to react appropriately. CHAPTER 12 ■ AUTOCOMPLETE SEARCH250 Figure 12-5. The r esult of your form mockup with some simple styling 7273ch12final.qxd 11/16/06 8:08 AM Page 250 Watching for Key Input One important aspect of an autocomplete search is creating a natural-feeling interface through which a user can enter input and have it be expanded into a full entry. For most search inputs, most of the actual search interface revolves around a single text entry field. You will continue to use this interface for your application, too. When constructing this input mechanism you need to take a couple things into account to make sure that the level of interaction is ideal: • Make sure autocomplete searches are triggered at appropriate intervals, where the response happens quickly enough for the user to react to it. • Make sure searches against the server happen as slowly as can be allowed. The faster the searches occur, the greater the strain placed on the server. • Make sure you know when it’s appropriate to do a new autocomplete search and open the results; not do a search, but open the old results; and hide the results. With these points laid out, you can now define a more exact user interaction that you want to implement: • Autocomplete results should be displayed based on what the user has entered in the text input field. Additionally, a minimum number of characters should be provided by the user in order to trigger the search (to avoid overly ambiguous searches). • Result searches should be triggered at regular intervals (as to avoid server overload from fast-typing users), but only when the text input contents have changed. • The result set should be revealed, or hidden, based on the focus that the user is cur- rently giving the input element (e.g., if the user focuses away from the input element, the result set should be hidden). With all of these points in mind, you can develop a single function for attaching the inter- action that you need on a single text input field. Listing 12-2 shows a function that can be used to achieve your desired results. This function only handles a case where a search should occur or where the results should be shown or hidden, not the actual searching or visual results (you’ll be adding that later). Listing 12-2. A Function for Binding Autocomplete Searching Abilities to a Text Input Field function delayedInput(opt) { // The amount of time to wait before looking for new user input opt.time = opt.time || 400; // The minimum number of characters to wait for, before firing a request opt.chars = opt.chars != null ? opt.chars : 3; // The callback to fire when the results popup should be opened, // and possibly when a new request should be made opt.open = opt.open || function(){}; CHAPTER 12 ■ AUTOCOMPLETE SEARCH 251 7273ch12final.qxd 11/16/06 8:08 AM Page 251 / / The callback to execute when the results popup should be closed opt.close = opt.close || function(){}; / / Should the focus of the field be taken into account, for // opening/closing the results popup opt.focus = opt.focus !== null ? opt.focus : false; // Remember the original value that we're starting with var old = opt.elem.value; // And the current open/close state of the results popup var open = false; // Check to see if there's been a change in the input, // at a given interval setInterval(function(){ // The new input value var newValue = opt.elem.value; // The number of characters that've been entered var len = s.length; // Quickly check to see if the value has changed since the last // time that we checked the input if ( old != newValue ) { // If not enough characters have been entered, and the 'popup' // is currently open if ( v < opt.chars && open ) { // Close the display opt.close(); // And remember that it's closed open = false; // Otherwise, if the minimum number of characters have been entered // as long as its more than one character } else if ( v >= opt.chars && v > 0 ) { // Open the results popup with the current value opt.open( newValue, open ); // Remember that the popup is current open open = true; } CHAPTER 12 ■ AUTOCOMPLETE SEARCH252 7273ch12final.qxd 11/16/06 8:08 AM Page 252 / / Save the current value for later old = newValue; } } , opt.time ); // Watch for a key press opt.elem.onkeyup = function(){ // If the keypress resulted in their being no more characters left, // close the results popup if ( this.value.length == 0 ) { // Close the popup opt.close(); // Remember that it's closed open = false; } }; // If we're also checking for user focus (to handle opening/closing) // the results popup if ( opt.focus ) { // Watch for when the user moves away from the input opt.elem.onblur = function(){ // If its currently open if ( open ) { // Close the popup opt.close(); // And remember that its closed open = false; } } // Watch for when the user focus' back on the popup opt.elem.focus = function(){ // If it has a value, and its currently closed if ( this.value.length != 0 && !open ) { // Re-open the popup - but with a blank value // (this lets the 'open' function know not to re-retreive // new results from the server, just re-open the popup). opt.open( '', open ); // And remembr that the popup is open open = true; } }; } } CHAPTER 12 ■ AUTOCOMPLETE SEARCH 253 7273ch12final.qxd 11/16/06 8:08 AM Page 253 Listing 12-3 shows how to use the simple delayedInput function within your autocom- plete implementation for watching user input. Listing 12-3. Using the Generic delayedInput() Function Within Your Autocomplete Implementation // Initialize the delayed input checks on our input delayedInput({ // We're attaching to the input text field elem: id("to"), // We're going to start searching after only 1 character of input chars: 1, // When the text field loses focus, close the results popup focus: true, // Handle when the result popup should be opened up open: function(q,open){ // Get the last word out of the comma-separated list of words var w = trim( q.substr( q.lastIndexOf(',')+1, q.length ) ); // Make sure that we're dealing with a word, at least if ( w ) { // Show the loading spinner animation show( id("qloading") ); // Load and process the results from the server } }, // When the popup needs to be closed close: function(){ // Hide the result set hide( id("results") ); } }); With a generic function for watching user input, you now have the task of tying this to the ser v er-side script, which will serve up the user data that you can load into your site. Retrieving the Results The next fundamental aspect of building an autocomplete search is the loading of data to be sho wn to the user . I t’s not a requirement that this data be loaded via Ajax (which you’ll be doing in this particular implementation); it could instead be written as a data structure and loaded into the page at run time. CHAPTER 12 ■ AUTOCOMPLETE SEARCH254 7273ch12final.qxd 11/16/06 8:08 AM Page 254 Your autocomplete implementation requires one thing to be complete: users. These user- names will be displayed with more contextual information (including the user’s full name and a user icon). With this in mind, it’s far easier to simply return a chunk of HTML from the server (in the form of a number of <li> elements), containing the information that you need about all of the matched users. Listing 12-4 shows the simple Ajax call required to load the HTML snippet from the server into the results pop-up. Listing 12-4. The AJAX Request for Loading an HTML Snippet (Containing User Information) Into Your Autocomplete Result Set // Do a request for new data ajax({ // Do a simple GET request to the CGI script which // returns an HTML block of LI elements type: "GET", url: "auto.cgi?to=" + w, // Watch for when the HTML comes back onSuccess: function(html){ // Insert it in to the results UL results.innerHTML = html; // And hide the loading animation hide( id("qloading") ); // Process the results } }); You should notice that in Listing 12-4 you’re loading your HTML results from a server- side application named auto.cgi, which takes one argument, which is the current text that you’re searching for (most likely a partial username). The auto.cgi script, which is written using Perl, is shown in Listing 12-5. It searches across a small dataset looking for a match, returning all matched users as a long HTML snippet. Listing 12-5. A Simple Perl Script That Searches for Matched Users #!/usr/bin/perl use CGI; # Get the 'q' parameter out of the incoming Query String my $cgi = new CGI(); my $q = $cgi->param('to'); CHAPTER 12 ■ AUTOCOMPLETE SEARCH 255 7273ch12final.qxd 11/16/06 8:08 AM Page 255 [...]... results via keyboard is in all likelihood the most important aspect to implement Since a user is already in the process of typing out a username, giving him the ability to keep his hands on the keyboard to finish the autocomplete is necessary 257 7273ch12final.qxd 2 58 11/16/06 8: 08 AM Page 2 58 CHAPTER 12 s AUTOCOMPLETE SEARCH You need to support the use of the Tab key to complete the currently selected... this is shown in Listing 12 -8 Listing 12 -8 Binding Mouse Navigation Events to a User Element // Whenever the user mouses over the li, // set it to be the currently highlighted user li[i].onmouseover = function(){ updatePos( this ); }; // When the user is clicked li[i].onclick = function(){ // Add the user to the input addUser( this ); 7273ch12final.qxd 11/16/06 8: 08 AM Page 259 CHAPTER 12 s AUTOCOMPLETE... 7273ch13final.qxd 2 68 11/16/06 8: 06 AM Page 2 68 CHAPTER 13 s AN AJAX WIKI Listing 13-1 Code Required to Save Data From the Client to the Server-Side Database // Insert the revision into the database sqlExec( // A query statement, the actual code of which is stored on the server "insert", [ document.title, // The title of the entry $("#author").val(), // The author value that the user provided $("#text").val(),... following listings Core JavaScript Code Listing 13-9 shows wiki.js, the main JavaScript code responsible for binding events and interacting with the user Listing 13-9 js/wiki.js // Get the name of the current page var $s = window.location.search; $s = $s.substr(1,$s.length); // Determine if a revision number // was provided - if so, remember it's ID var $r = false; // Revisions are provided in the format... } }); } JavaScript SQL Library Listing 13-10 shows sql.js, the code responsible for communicating with the server and retrieving the JSON data from the SQL queries Listing 13-10 js/sql.js // UPDATE THIS VARIABLE // The URL where your Server-Side script is var apiURL = "api/ruby/"; // Some default global variables var sqlLoaded = function(){} 279 7273ch13final.qxd 280 11/16/06 8: 06 AM Page 280 CHAPTER... 13-11, represents the server-side portion of the Ajax wiki application All of this code is written in the Ruby programming language For examples , of the same code, but written in PHP Perl, or Python, you can visit this book’s web site at http://jspro.org/ 7273ch13final.qxd 11/16/06 8: 06 AM Page 281 CHAPTER 13 s AN AJAX WIKI Listing 13-11 The Server-Side Portion of the Wiki Application Written in Ruby... SQLite in some of your smaller projects It’s a great way to get up and running when you don’t need the overhead of a large database installation 269 7273ch13final.qxd 270 11/16/06 8: 06 AM Page 270 CHAPTER 13 s AN AJAX WIKI How to connect to the SQLite database is virtually identical in every language They all require two steps: The first is to include a SQLite library (to provide generic connection functions),... 7273ch13final.qxd 274 11/16/06 8: 06 AM Page 274 CHAPTER 13 s AN AJAX WIKI The important part of the code shown in Listing 13 -8 is the quick snippet textile (sql[0].content), which grabs the wiki revision text from the data structure and runs a Textile formatter on it Much in the way that HTML is a way of marking up content, so is Textile Textile is significantly simpler, providing basic, understandable... someone has already done all the hard work and created a Textile JavaScript library that’s capable of converting Textile-formatted text into final, presentable HTML More information about Textile can be found on the following web sites: • Textile overview: http://www.textism.com/tools/textile/ • JavaScript Textile implementation (used in this project): http://jrm.cc/extras/ live-textile-preview.php Now... js/wiki.js (shown in Listing 13-9): The main JavaScript code, responsible for binding events and running SQL queries 275 7273ch13final.qxd 276 11/16/06 8: 06 AM Page 276 CHAPTER 13 s AN AJAX WIKI • js/sql.js (shown in Listing 13-10): The code responsible for communicating with the server, retrieving the JSON data from the SQL queries • js/textile.js: A copy of the JavaScript Textile library (for converting . the user to the input addUser( this ); CHAPTER 12 ■ AUTOCOMPLETE SEARCH2 58 7273ch12final.qxd 11/16/06 8: 08 AM Page 2 58 / / And focus back on the input again id("to").focus(); }; With. field and to react appropriately. CHAPTER 12 ■ AUTOCOMPLETE SEARCH250 Figure 12-5. The r esult of your form mockup with some simple styling 7273ch12final.qxd 11/16/06 8: 08 AM Page 250 Watching. SEARCH2 48 Figure 12-2. An example of an autocompleted Instant Domain Search Figure 12-3. An example of del.icio.us autocomplete in action, completing a new tag 7273ch12final.qxd 11/16/06 8: 08 AM