AutoComplete.js update 1.2

I’ve completed an update/rewrite of my AutoComplete (Google suggest) widget. It now also includes a complete API document similar to the HelpBallons API.

Examples: http://www.beauscott.com/examples/autocomplete

Download: http://www.beauscott.com/examples/autocomplete/autocomplete.zip

GitHub: https://github.com/beau6183/AutoComplete

As always, please let me know if you have any issues or suggestions.

Beau

This entry was posted in AJAX, Development, JavaScript, PHP, Widgets. Bookmark the permalink.

39 Responses to AutoComplete.js update 1.2

  1. venkat says:

    It would be nice if the list scrolled continuously when the down arrow is pressed down. Right now, we have to keep pressing it over and over to scroll down the list. It helps a lot on long lists.

  2. Beau says:

    Thanks for the feed back venkat!

    I’ve added that feature!

  3. Nathan says:

    Am I able to store an id with each option so when the user selects an option i can somehow get the id of the oprion and use that in my form submit.

  4. swapshop says:

    Seems to have a issue if you stay type car and it will return a lot of cars then the results? Can this be changed?

  5. steve says:

    I am having a difficult time adding any style to this select box. Do you have any suggestions for me.

    Thanks

  6. cronfy says:

    When I type a beginning of a word, the script gives me suggestions. But when I change my mind about last letter I typed and delete it (still leaving more than 3 characters in the box) there are no suggestions shown. I have to delete one more letter and enter it again to see suggestions list.

    This in not very convenient, would you mind changing this behaviour?

    Thanks.

  7. battisti says:

    Hey man your script is great, I test it in diverses browser and in ff3 on linux the it’s load but the css not render so good, some idea how can i fix it?

  8. bithive says:

    There appears to be a bug using this script with Firefox 3. On my sites, the results are shown but clicking on one only makes the suggestions disappear, it does not update the text field. Everything works fine in Firefox 2.

  9. moo says:

    Thanks for this great library! I’ve been looking for one like this for a while now. It’s very flexible, very easy to implement, very lightweight.

    I know you’ve been getting a lot of suggestions already, and i know that could get annoying. But here is another one :-p

    to be like the real google suggest, whenever a suggestion is selected the value in the input field should mirror the value of the selection, and when “TABS” out, the value should remain. and when hit “ESC” the value returns to what was typed, not the suggestions.

    I modified your code to do this by a bit of touch up in the _suggest method. i have a value storing the current input, whenever a suggestino is selected, the input field changes, when tabs out, the new value stays, when escape, the value returns to what i stored.

    Even without this functionality, i still think this is a great library. Thanks a bunch!

  10. Bart says:

    I just started using it and really like it so far. A couple suggestions:

    1) I’d like more events to hook into. In particular I’d like to know when an ajax request starts and completes.
    2) I’d like an option to add an ajax spinner (working) graphic to the text input box while an ajax request is happening. This could be accomplished manually if there were options like in my first request.

  11. Bart says:

    Another suggestion: When highlighting an option in the select via the keyboard and pressing TAB, a selection of that option should be made. What happens now is that it just hides the select.

    BTW – I have modified the source to include all of these suggestions. If you (or anyone else) is interested, you can contact me at bartlewis[at]gmail[dot]com

  12. starcxt says:

    I downloaded it yestoday,and I found an error on it.
    When you type some character,and do not move up/down key,then there is no options selected,then if you push “Enter” key,you get an error.So I modified the function like below:

    select: function()
    {

    if(this.selector.options.length){
    var index = 0;
    if (this.selector.selectedIndex != -1)
    {
    index = this.selector.selectedIndex;
    }
    this.input.value = this.selector.options[index].value;
    }
    this.cancel();
    if(typeof this.options.onSelect == ‘function’)
    {
    this.options['onSelect'](this.input);
    }

    }

    Then it works fine.
    Maybe it’s not right,because I havn’t read the all of the code right now.

  13. VitorGGA says:

    Hy,
    I like this script, is simple!!!
    Is possible can call the suggestions (autocomplete combo) of a button? I like add an button “Suggestions” to make easy to peoples.
    Thanks, sorry for my bad english.

  14. Oops, typed some xml, which has been stripped away for about 50%!

  15. Georg says:

    Hi Beau,
    the Autocomplete works fine, except that I can not work with special characters like german umlaute (ü,ö,ä,ß). Tried to encode the results if umlaute are in but this shows e.g. ü in the selection.
    I would appreciate any suggestion.
    Regards Georg

  16. Stephen says:

    is it possible for to make the autocomplete automatically requery for new results when you select a suggested item? I’m using it to autocomplete path names, so it would be nice if selecting a directory automatically showed all the subdirectories…

  17. Fernando says:

    Hi,
    The value of the initial position is incorrect when using iframes

    you can see this screenshot here:

    http://pressenter.com.ar/~ftoledo/tmp/Screenshot.png

    any workaround for that issue?

  18. Fernando says:

    Sorry, my mistake in last post,
    im not using iframe , but is a div with overflow: scroll

  19. Jeff says:

    This is great! I like this much more than the ASP.NET AutoCompleteExtender which I was using previously. One addition I would like to see is support for more events – OnSending and OnRecieved in particular. I’d love to have an indicator message/image to let the user know that something is happening and these events would be key in updating the UI.

    Also, the input element gets passed into the OnSelect event, but the item that was selected does not. This means that you can’t customize processing based upon what was clicked – which is something else I was trying to do. For example, if item A was clicked navigate to page-A.html, if item B was clicked, hide a div, etc….

    I managed to modify your code to accomplish both of these remarkably easily (thanks for writing good code!) but I figured the feedback would be nice.

  20. Tim says:

    it’s very nice!
    Can i use it in ASP and how?
    Thanks.

  21. rajesh says:

    sir,
    my search for simple and flexible autocomplete script ended here.

    i have a small problem.
    how can i add tooltip to the items of combobox being displayed by the autocomplete script.

    i am able to display the autocomplete list but the length of items is more than the size of the input box. so i was trying to display tooltip when the items are being scrolled.

    pl. help.

    thanks,
    rajesh.

  22. Rajesh says:

    hi,
    the script is really very good.
    can u pl guide how to pass other form values to the script along with the input value ?

    thnx,
    rajesh

  23. Richard Wilson says:

    Absolutely wonderful — got it working first time

    Is there a way to exclude the animations without simply not including Scriptaculous?

  24. Hans says:

    The javascript support is nice but the PHP needs tweaked and the data storage method chosen should be avoided.

    Because it uses a server-side text file, you’re forcing regular expressions, causing sluggishness due to full-file scanning and parsing, especially with large files. It also requires multiple unnecessary File I/O calls (again slow, especially with larger files). It also prevents the person implementing it from limiting results for faster retrievals.

    The other problem is that it pulls numerous duplicates (even in the demo, type in “bet” and it’s littered with duplicates), exacerbated when there are about 100 words that start with the users’ entries.

    Because of the File-to-PHP method, there’s no way of getting around the non-unicode compliant Sort functions provided by the PHP library. That means to get non-English alphabets to sort correctly, you have to supply your own comparison function to the PHP sort method.

    A database backend using the DISTINCT … LIMIT options provide a much faster, cleaner and more controlled method. It takes care of every single one of these problems mentioned.

    Once you place a database in and tighten the PHP code, this is a sharp script.

  25. tbelknap says:

    OK, has something changed about the code? Because even the examples included with the script don’t seem to be working right. They work fine on your site, but the included files in the zip don’t work, don’t throw errors, don’t do anything.

  26. tbelknap says:

    Great plugin, and thank you very much!

    One problem I’m running into: how can I dynamically add new instances of the AutoComplete plugin for dynamically-created text fields? What I mean is: I want to be able to allow the user to click a button and get a new text field (we have need of an arbitrary number of text fields). When that happens, we want the AutoComplete function to also work for the new field.

    Thanks.

  27. claudio says:

    and connect to a database?

  28. Alfredo says:

    Hello, How connect with mysql. I try but don’t Work.

    Thanks

  29. Enrique says:

    I noticed that there is a bug on the threshold, as if you write characters until you get the list and then you select all the text and hit delete the ajax call is made even that there are no characters on the input. The reason is because the event that is being used is keydown instead of keyup, so the desition about to call or not the server is made before the pressed key take efect.

    is there a reason to use keydown instead of keyup?

    I changed the script to use keyup and deleted the “- 1″ on the line:
    if(this.input.value.length >= this.options.threshold – 1)
    (I think that “-1″ was a hack made for the keydown)

    Any comments will be appreciated.

    NOTE: I’m modifying the script to be able to use key/value as on normal select boxes. just in case someone needs it.

  30. Thank you Beau,
    I find it a very useful script, thank you for sharing this! Very good it gives “onSelect” feature, thank you once again!!
    Marci

  31. Duncan Bradley says:

    @Fernando

    I too had the same issue…..looking through prototype’s documentation, there is a viewportOffset() function which seems to provide the answer……
    So I changed the _reposition function to this
    _reposition: function()
    {
    if(!this.drawn) return;
    var pos = this.input.viewportOffset() ;
    //Position.cumulativeOffset(this.input);
    pos.push(pos[0] this.input.offsetWidth);
    pos.push(pos[1] this.input.offsetHeight);
    Element.setStyle(this.selector,{
    left: pos[0] ‘px’,
    top: pos[3] ‘px’
    });
    }

    and this now makes it position the dropdown below the field, regardless of where the div is scrolled to….

  32. k3mist says:

    When hitting the tab key with a highlighted selection in the drop-down, the script behaved unpredictably in any browser I tested in. Sometimes it would tab out of the input, sometimes it would not, sometimes the drop-down would not disappear.

    No matter what, when hitting tab, it never placed the highlighted selection into the input box. Maybe this last thing I mentioned was intended.

    Anyway, because of the behavior, it is quite annoying and the best fix I could come up with was making the tab key behave like the enter key.


    From 742bd90a8f27df25338c1552fc2bd5ba80abce09 Mon Sep 17 00:00:00 2001
    From: x
    Date: Thu, 11 Mar 2010 13:55:09 -0500
    Subject: [PATCH] Make tab key behave like return/enter key in autocomplete lib

    ---
    js/lib/autocomplete.js | 7
    1 files changed, 7 insertions( ), 0 deletions(-)

    diff --git a/js/lib/autocomplete.js b/js/lib/autocomplete.js
    index 223ec02..99c8418 100644
    --- a/js/lib/autocomplete.js
    b/js/lib/autocomplete.js
    @@ -328,6 328,13 @@ var AutoComplete = Class.create({
    return false;
    break;
    case Event.KEY_TAB:
    if(this.visible)
    {
    this.select();
    return true;
    }
    return false;
    break;
    case Event.KEY_BACKSPACE:
    case 46: //Delete
    this.cancel();
    --
    1.6.3.3

  33. k3mist says:

    It doesn’t look like that patch displayed correctly at all. Sorry.

  34. Prototype 1.7_rc3 fix

    /**
    * Lays the UI elements of the control out, sets interaction options
    * @param {Object} event Event
    */
    draw: function()
    {
    if(this.drawn) return;
    if(this.options.cssClass)
    this.selector.className = this.options.cssClass;
    this.input_layout = this.input.getLayout();
    this.selector.absolutize();
    this.selector.setStyle({
    display: 'none',
    height: 'auto',
    width: this.input_layout.get('width') + 'px'
    });

    this.selector.size = this.options.size;

    document.body.appendChild(this.selector);
    this.input.autocomplete = 'off';
    this.drawn = true;
    },


    /**
    * Repositions the selector (if visible) to match the new
    * coords of the input.
    * @private
    */
    _reposition: function()
    {
    if(!this.drawn) return;
    var pos = this.input.viewportOffset();
    var pos_scroll = this.input.cumulativeScrollOffset()
    Element.setStyle(this.selector,{
    left: (pos.left + pos_scroll.left ) + 'px',
    top: (pos.top + pos_scroll.top + this.input_layout.get('border-box-height')) + 'px'
    });
    },

  35. Scott says:

    I’m not sure if you are still checking this, but I was wondering if it’s possible to pass a hidden “id” value when the user selects the appropriate text value.

    If it’s easier, feel free to email me at the address I used for this comment.

    Thanks!

  36. Daniella says:

    This Auto-Complete script is great. Here are two custom features I put in that might be helpful to others:

    1- To avoid having an empty drop down box appear when I return an empty set of matches, I return the word ‘hide’ and then I test for this word in the script. On line 481 in version 1.2, you can add an extra line that tests to see if the word ‘hide’ has been returned as the matching text. If it has, the function returns right away instead of displaying the drop down. You should be able to replicate this with returning xml or json instead of text, and you should be able to use any other word aside from hide.

    /**
    * Parses the TEXT result, adds options
    * @param {String} text The text response to parse
    */
    _parseText: function(text)
    {
    //custom changes to script
    // don’t display an empty dropdown; just return if the word ‘hide’ is returned by the ajax request
    if(text===’hide’){return;}
    //end changes
    var suggestions = (text||”").split(/\n/);
    for(i = 0; i < suggestions.length; i++)
    this._addOption(suggestions[i]);
    },

    2 – Wanting the behavior where pressing the backspace or delete keys don't cause the drop down list of suggestions to disappear, I commented that in lines 331 to line 335, in the _suggest function.
    It looks like this now:

    switch(key)
    {
    case Event.KEY_LEFT:
    case Event.KEY_RIGHT:
    return false;
    break;
    case Event.KEY_TAB:
    //case Event.KEY_BACKSPACE:
    //case 46: //Delete
    // this.cancel();
    // return false;
    // break;
    case Event.KEY_RETURN:
    if(this.visible)

    I hope this is helpful to someone.
    Thanks for the script!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>