Wrox Programmer Forums
BOOK: Professional Ajax ISBN: 978-0-471-77778-6
This is the forum to discuss the Wrox book Professional Ajax by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett; ISBN: 9780471777786
Important: For the new 2nd edition of this book, please post here instead: [url="http://p2p.wrox.com/forum.asp?FORUM_ID=307"]http://p2p.wrox.com/forum.asp?FORUM_ID=307[/url]
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional Ajax ISBN: 978-0-471-77778-6 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old February 27th, 2007, 08:19 AM
Registered User
Join Date: Feb 2007
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default Ch.7 - Autosuggest example - some modifications

first of all I want to give congratulations to the author for the great book (I haven't finished it yet) and say sorry for my horrible english.

I just want to suggest some modification to the suggest example of chapter 7.
  • The first is a personal choice, it is about using 2 Javascript classes instead of one. I prefer to use one cause the Suggestion Provider haven't many methods (only one) and I think that it can make a bit of confusion...
  • This modification is an improvement. When the onblur event of the text is activated, in the textbox there is a suggested text that will remain in the textbox also if the intentional of the user is to type a text that is a substring of the suggested string (ex car - caramel).
    I resolve this situation by placing the this.userText members in the textbox on the blur event only if the user haven't clicked on the dropdown menu. I trace the clicking in the menu by a simple boolean variable this.suggestionClicked

  • Also this modification is an improvement. The class is set to don't submit the form if the enter key is pressed.
    This is not very good because the user is forced to activate the submitting with the mouse or by the tab key.
    I simply resolve this on the handleKeyDown method blocking the form submitting only if the dropdown menu is not open. To trace the opening of the dropdown menu i simple use a boolean variable this.dropDownOpen

  • This is a necessary correction.
    When you type a character, at the keyup event the class do the Ajax request for the suggestion, so first suggestion is put in the textbox with typeahead.
    But try this:
    type a character and few milliseconds before the suggestion appear, press another key (and not release it for few milliseconds), then the suggestion will appear and the typeahead do his work.
    When you release the key, selected text will not disappear because text selection is done after you keydown! (note that selected text disappear only at the keydown event)
    In this situation, you release the key and the first suggestion proposed will be considered as the text that the user type, so the class do the request for that suggestion
    and in the textbox is going to be a suggestion...but we have typed only 2 characthers.
    Consider having a slow internet connection.
    In this case the user type a character but the delay between the suggestions reception and the suggestion displaying (with typeAhead) is so high that allow user to type another character.
    (Note that I say suggestions reception...before this oHttp.abort(); on requestSuggestions method of suggestionProvider will abort any request.)
    After second character, the first suggestions list will be displayed and the first suggestion typeAheaded in the textbox but...consider for example,
    A(first letter) B(second letter)
    America(first suggestion for 'A')
    it is clear to see that the typeAhead put America in the textbox selecting 'erica'.
    But we typed AB! Very bad.
    Sorry for the confusion, this is very hard to explain considering my english.
    However, solution for this problem is
    <s>simply an if on the typeAhead method checking that this.textbox.value==this.userText
    this work because on handleKeyUp the textbox.value is stored in this.userText and if the delay of the typeAhead is higher than the user typing, the if stop the typeAhead</s>
    passing the textbox.value (searchText) to the requestSuggestion method of suggestionProvider like argument and so, pass the searchText in the autoSuggest method.
    On this method check for (aSuggestions.length > 0 && searchText==this.textbox.value)
    before show suggestion and do the typeAhead.
    This prevent the component for displaying suggestions and put in textbox wrong data
    while pending requests are executing.

  • This modifications is required for correct use of the component with internet explorer 6.
    This f*****g browser show the dropdown menu beneath the select input if there is one under the textbox.
    To solve this we must place an IFRAME beneath the dropdown menu and set it at the same dimensions.
    This is done in the createDropDown method, at showSuggestions instead I set the height of the IFRAME, and on hideSuggestions I hide the this.layer and this.iframe.

  • This modification is for the same f*****g internet explorer 6.
    If you try to select with the mouse an element of the dropdown menu outside the text, you notice that a null will be placed in the textbox.
    I don't know exactly why explorer don't recognizes the DOM node.
    I resolve this simply memorizing the last suggestion highlighted in the this.lastSuggestionHighlighted variable. If the user with IE6 click on the non-text area of the suggestion, the class will place in the textbox last suggestion highlighted.
    This variable is set initially in showSuggestion method with the userText value.

  • This is a little correction for FireFox cursor positioning.
    When the dropDown menu is displayed and you select the suggestions with the down arrow key
    everything work fine, the cursor move at the end of string.
    But if you go back in suggestions list with up arrow key, the cursor will not move to the end of the string but to the penultimate characther.
    This happen because the pressing of up arrow key produces the same behavior of the left arrow key.
    This little problem can be resolved by returning a false value for event handler, when key
    38 (up arrow) is pressed.
    First, go to the init() function, where in this.textbox.onkeydown the code assign a function that call oThis.handleKeyDown(oEvent).
    Set this calling to return a value with return oThis.handleKeyDown(oEvent).
    Then go to handleKeyDown() function and in case 38 of the switch, add return false after
    the goToSuggestion call.

  • This is a very little personal choiche, always about cursor position.
    When esc key is pressed you can have selected with keys a suggestion or have a typeAhead activated.
    In first case, esc will hide suggestions list, in the second, user typed text will be restored in the textbox.
    In both case the cursor will be placed at the begin of the textbox.
    I think this is not useful esplecially for the second case.
    Just remove line this.selectRange(this.userText.length, 0) in the handleKeyDown function

  • This is a correction about the behavior of using keyboard or mouse to select suggestions in the menu.
    For keyboard, suggestion moving is done using this.cur variable.
    For mouse this variable is ignored.
    So if in a 5 elements menu, you select by mouse the 2nd sugg. then you use the down arrow key, you will select the first (using cur) not the 3rd.
    This can be simply resolved by placing a line of code in the highlightSuggestion method,

    if (oNode == oSuggestionNode) {
     oNode.className = "current"

    in keyboard selectioning, cur will be assigned 2 times, but this not influences

  • This is a correction about typing letters that need shift key like capital letters.
    When Shift key is pressed, the handleKeyUp() method doesn't do a suggestions request, but it clear the timeout for it!
    It implies that when for example a capital letter is typed, the request is aborted also if there are suggestions for typed string.
    This can resolved removing clearTimeout() instruction at the begin of the handleKeyUp() method and place it before every setTimeout instruction (2 times).
    This assures that a request will be aborted only if a new one will be called.

If you need the complete source code I will post it!

Hope this help
Michele Castellucci
Old February 27th, 2007, 11:09 AM
joefawcett's Avatar
Wrox Author
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts

I didn't write that particular chapter, Nicholas did, but I'd like to comment.

In principle all your suggestions are good, I especially take your point about a select element obscuring the dropdown. Fortunately this has now been fixed in IE 7 so in a couple of year's time most browsers should work properly, until then the iframe is a good idea.

I'm not sure I understand the second point, surely only suggestions in the list are acceptable?

The one point I disagree about is the first. I also wrote an AutoSuggest example for the new Beginning XML edition out soon with some help from Nicholas. The big advantage of having two classes was that I could change between XML and JSON for the data representation very easily. There are also other small advantages in keeping a loosely coupled system.


Joe (Microsoft MVP - XML)
Old February 27th, 2007, 11:32 AM
Registered User
Join Date: Feb 2007
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts

I don't understand very well what you don't understand for the second point (sorry for the word game). If only the displayed suggestions are valid, the improvement is not necessary, but in this case, why not use a simple select?
Instead my plan of utilisation of the suggestion control is on search forms. In this case this improvement can prevent the control to write what user doesn't want.

I can't see the difficult of changing data rapresentation changing one method instead of one method class.

I want to focus you on the last modification i've done few minutes ago. Is the longest point (the 4th). I think is a very necessary correction cause otherwise there be a lack of functionality
Old February 27th, 2007, 11:56 AM
joefawcett's Avatar
Wrox Author
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts

quote:Originally posted by ice84

I can't see the difficult of changing data rapresentation changing one method instead of one method class.
Because I want to be able to give someone the code and say, this works, just write a class that does ...
I don't want them to have to delve into my code and change a method.
It's just neater in my opinion.

I will try out point four and let you know.


Joe (Microsoft MVP - XML)
Old February 27th, 2007, 10:44 PM
Registered User
Join Date: Feb 2007
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts

Ok Joe, I appreciate your precision.

I wait for the feedback of 4th point..but meanwhile I've discover another malfunction of the component.
It is always about 4th point. I've write an extended explanation.


Old March 1st, 2007, 12:02 PM
Registered User
Join Date: Feb 2007
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts

Sorry for my fury but my intention is to add this suggestion class to my content
management system, so also my customers will appreciate the precision of the functionality


I've add 3 points to the modifications, I hope that they are finished.

I wait for the authors reply, especially by Nicholas Zakas that was the one that originally
write this class.


Old March 5th, 2007, 02:59 PM
Registered User
Join Date: Feb 2007
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts

I am still here :D

Where are the authors?

I've added another point...there are 10 modifications now.

Old March 9th, 2007, 12:51 PM
nzakas's Avatar
Wrox Author
Join Date: Dec 2004
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts

Hi Michele,

Thanks for your comments. Some of your suggestions for browser workarounds are valid, but please realize that this example is designed to show a concept, not to be an end-all be-all solution for autocomplete textboxes. Everyone's requirements are going to be different, and as you stated, some of these changes are your personal preference.

Joe's point about keeping the control as two different classes is exactly true. This is just good object-oriented design which allows you to swap in and out different suggestion providers depending on your data source. This is a common pattern in autocomplete controls and other controls that use data sources.

I'll certainly take your suggestions under consideration and take a look at the code this weekend. But please keep in mind, all of the examples in the book are meant to be purely examples. We're not expecting you to be able to take it completely and have it meet all of your needs. Rather, the examples are ways of getting you started so that you can more easily get started in developing your own solutions.


Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
Old August 25th, 2007, 10:57 AM
Registered User
Join Date: Aug 2007
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts

Hi Michele,

Any chance of seeing the modifications you made for making the
autosuggest example work with Internet Explorer Version 6.x?


Old September 17th, 2007, 05:31 AM
Registered User
Join Date: Feb 2007
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts

Sure! :)

Similar Threads
Thread Thread Starter Forum Replies Last Post
Modifications to Appointment Booking... mkumar BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 7 March 31st, 2007 01:51 AM
Ch.7 - Autosuggest example - Exception Error Joel Chaney BOOK: Professional Ajax ISBN: 978-0-471-77778-6 0 March 27th, 2007 09:35 AM
"/Modifications" maxshreck BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 3 October 10th, 2006 01:13 AM
Membership modifications...should I? Tremmorkeep BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 10 September 22nd, 2006 04:20 AM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.