DHTML Utopia Modern Web Design Using JavaScript & DOM- P10

DHTML Utopia Modern Web Design Using JavaScript & DOM- P10:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P10 Chapter 6: Forms and Validation ing country names. Some have worked around the problem of locating particular countries in these long lists by putting the more frequently-selected countries at the top,13 but this is hardly an ideal solution. It is possible to press the key that corresponds with the initial letter of an entry in the list in order to jump to that entry; repeatedly hitting that key will move between list entries that begin with that letter. This suggests an improvement: perhaps instead of keypresses triggering initial-letter searches only, they should accumulate into a string, which is matched as a whole. While typing “k,” “i,” “n” in a standard drop-down will result in a jump to the first list entry beginning with “k,” then the first beginning with “i,” then the first beginning with “n,” this could be changed so that those keypresses jump the selection to the first entry containing the string “kin.” That would probably be the United Kingdom (or the Kingdom of Tonga!), in the countries example. Functionality very similar to this is actually already present in both Safari and Firefox. Both of those browsers let you type a series of letters to match the start of an entry in a drop-down list. This example takes this feature a step further by searching for the string anywhere in the list item. And it works in Internet Explorer to boot! Unfortunately, Safari does not support handling keyboard events on drop-down lists with JavaScript. As a result, the enhancement we will undertake in this section will not apply to that browser. A number of further enhancements also suggest themselves: the current accumu- lated string should be displayed somewhere so that the user can see what they’ve entered, similar to Firefox’s “type-ahead find” feature. It should also be possible, as with type-ahead find, to press Backspace to remove the most recently-added letter from the accumulated string. Finally, after a period without typing, the accumulated string should be reset to blank to allow typing from scratch. Here’s an example HTML file containing the countries list: File: typeahead.html Type-ahead drop-down lists 13 Sometimes, developers place just one country at the top—the United States—leaving UK residents such as myself, and other non-Americans, to scroll through the ridiculously long list. Hmph. (Australi- ans don’t mind—Ed.) 160Licensed to siowchen@darke.biz Type-Ahead Drop-Down Lists Type-ahead drop-down lists Afghanistan Albania Algeria … Zaire Zambia Zimbabwe The associated JavaScript should attach an event listener to each select element in the document. Browsers offer three events for handling pressed keys: keyup, keydown, and keypress. As we saw in Chapter 3, despite being the best-supported of these properties, keypress is nonstandard, and a little limited. In particular, in some browsers it does not fire for “control” keys such as Backspace, which is required by this script. We’ll therefore use keydown for this script. In summary, we’ll create a library object as follows: File: typeahead.js var tADD = { addEvent: function(elm, evType, fn, useCapture) { … }, init: function() { … }, addKey: function(e) { … } } tADD.addEvent(window, load, tADD.init, false); This is mostly standard setup. As only a single listener is required, we’ll put it all in typeahead.js. There’s nothing else in that file. Here’s the init method: File: typeahead.js (excerpt) init: function() { if (!document.getElementsByTagName) return; var selects = document.getElementsByTa ...