jQuery plugin: Autocomplete

Note (2010-06-23): This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI, and this migration guide explains how to get from this plugin to the new one. This page will remain as it is for reference, but won’t be updated anymore.

If you’re still using the plugin and can’t upgrade to jQuery UI autocomplete: Someone else is maintaining a GitHub repository with the plugin, including some fixes.

There’s also an update to the original version of the standalone plugin in a Google Code project.

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Current version: 1.1 (Deprecated, see note above)
Compressed filesize: 8.001 bytes
License: MIT/GPL
Tested in: Firefox 3, IE 6 & 7, Opera 9, Safari 3

Files:

Download
Changelog
Demos
Documentation (Plugin Options)

Dependencies

Required

Optional

  • optional: bgiframe plugin to fix select-problems in IE, just include to apply to autocomplete

Support

  • Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “autocomplete”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
  • Please post bug reports and other contributions (enhancements, features) to the plugins.jQuery.com bug tracker (requires login/registration)

Donate

$ USDDonate€ EURDonate


No more comments.
  1. David S.
    19. April 2007 |05:36

    Thank you for sharing your work.

    One question: is there a way to flush the cache?

    Thanks again.

    Peace,
    David S.

  2. 19. April 2007 |11:11

    @David: Currently not, I’ll (re)add that.

  3. 1. May 2007 |00:02

    This plugin crashes safari on the first keypress.

    Any ideas how to avoid that?

    I need this to work on safari, but am willing to help… but it’s hard to get any information when the browser just crashes on you.

  4. 1. May 2007 |14:05

    @Mike: I can’t test on Safari. The only thing that you could try would be to rip out most of the plugin within the keypress handler to try to find the offending code.

  5. Matt
    2. May 2007 |11:21

    Found a bug… using
    WHERE name LIKE ‘%$_GET[q]%’
    and
    autocomplete(“ajax.php”,{delay:10,autoFill:true,extraParams:{page:”autocomplete”}})

    If the name “Matt” was saved in the database, and you typed tt, then autofill would make the text field look like this “tttt”, with the last two t’s selected.

    Other then that, works great :D

  6. 2. May 2007 |21:47

    @Matt: So far I must handle that as “it’s not a bug, it’s a feature”. Mixing match substrings with autofill just doesn’t work, you have to disable one or the other.

    Of course I welcome ideas on how the autofill should work in combination with matching substrings. The implementation may not be trivial either, but so far I simply don’t know how it is supposed to work at all.

  7. Lance
    3. May 2007 |04:01

    Hi this is great however, I’m having one problem. My implementation best suites the ‘Single Bird (remote)’ application as I need to have both a text and key values, and to use remote data. Substring matching is also VERY important.

    The problem is that typing enough in the query to narrow the selection down to 1 item and then clicking TAB doesn’t select the value for the hidden input box in the example.

    The TAB works fine in the ‘Single City (local)’ and ‘Multiple Birds (remote):’ examples but I couldn’t work out what to change to make the TAB work with the ‘Single Bird (remote)’ version. Could you please tell me as it is very important for what is needed.

    Thanks,
    Lance

  8. 3. May 2007 |07:21

    @Lance: Please take a look at the configuration for both. The intereseting difference is the selectFirst option. Its enabled by default and disabled in the single-remote example. Enabling it again should do the trick for you.

  9. Pavel
    14. May 2007 |13:57

    Hi, is it possible to get Autocompleter object and set options? Because I’d like to change extraParameters for url when onchange of some element occur.

    With the first version of plugin it was possible using setExtraParams().

    Thanks,
    Pavel

  10. 15. May 2007 |19:07

    @Pavel: You can now use the setOptions-method to to the something similar. Let me know if that helps.

  11. Lance
    16. May 2007 |14:51

    Hi Jörn,
    When getting the result on selection using

    jQuery(‘input#email’).result(function(event, data, formatted) {
    // some function using value selected row.to
    });

    How do you extract the row.to value on it’s on. I’ve been attempting to get it from the data (thinking it is an array)? This is using you email example. I require this value (not returning email stuff but a data key in my case) so that I can work on populating a second dependant input box. Never know, you might even like to make such an example.

    Thanks again,
    Lance

  12. 16. May 2007 |23:13

    @Lance: From what you describe it seems like all you need is already available and shown in the examples.

    Something I find very helpful when learning new JS-APIs: Use Firebug to output all arguments to some callback. In this case:

    jQuery("input").result(function() {
      console.log(arguments);
    });

    One of the arguments should contain the data you are looking for. Let me know if that helps.

  13. Gary F
    20. May 2007 |17:57

    Jorn, this is great! The best autocomplete I’ve found in my travels. This is a good reason to start using jQuery in my sites. :-) It even works in IE 5.5. (Yes, I have to support this old thing) Well done. :-)

  14. 21. May 2007 |08:20

    @Gary: Great that its working for you. I had no idea that it supports IE 5.5, thats nice to have.

  15. khoker
    21. May 2007 |20:10

    Ugh. I just spent the last hour trying to figure out what was broken in Safari. It turns out you have no bug at all, but your jquery-1.1.2.pack.js is screwed up.

    For some reason your jquery-1.1.2.pack.js crashes Safari when you try and use .html(‘whatever’); (specifically line 586 in autocomplete.js). If I replace that 1.1.2 file with a 1.1.2 download from the jQuery site (compressed or not) it works fine.

    You might want to get a fresh copy of jQuery. I’m not going to do to a diff on two packed versions :)

    -khoker

  16. 21. May 2007 |22:37

    @khoker: Thanks for the report. Safari is really weird.

  17. Pavel
    21. May 2007 |22:39

    Thanks Jörn, setOptions works perfectly.

  18. Carsten
    28. May 2007 |08:38

    Vielen Dank für das Script und die Überarbeitung. Bei der aktuellen .pack.js aus der ZIP bekomme ich noch eine Fehlermeldung im Firebug:

    missing ; before statement
    site/jquery.autocomplete.pack.js
    Line 1

    Wenn ich die ungepackte Version nehme geht es. Wenn ich die dann selber packe (mit Base62 encode) dann bekomme ich den selben Fehler. Ein packen ohne die Base62 Option schmeisst ebenfalls den selben Fehler. Dean Edwards kann hier vielleicht helfen…

  19. Carsten
    28. May 2007 |09:50

    nice work! one more error-report: while using multiple values (great thing!) and using the tab key to leave the field this will select the current value (again) not leaving the field at all (okay that’s logical and can’t be solved that easily because it’s not clear what the user want). but additionally if you then leave the field with tab (pressing it again) a last seperator will be left within the field. I think this should be removed.

  20. 28. May 2007 |21:55

    @Pavel: Great.

    @Carsten: Die Fehler in der gepackten Version dürfte meine Schuld sein. Immer etwas fummelig zu suchen, aber leicht zu beheben.

    I thought about removing the additional seperator, but so far settled to ignore it. It’s very easy to remove it on the serverside. And its the same way that GMail does multiple autocomplete.

  21. Carsten
    29. May 2007 |11:37

    Additional Seperator: Do not know the google way (but this is something to mimic, tough), and for the serverside this is all fine.

    One suggestion to make it a better feeling for the user on the clientside ;):

    When pressing the backspace key and the last seperator is deleted the autcomplete-suggest-box should close. that way you can tab-out of the field. This will give the user the possibility to change it for herself because she does not know that this is fixed on the serverside.

    Additionaly (i looked into the source and i know it’s not easy) I want you to ask what you think about the possibility to give more then one seperator char/char-sequence. This would be really cool.

  22. 29. May 2007 |14:03

    Hello Jörn,

    I like your plugins. Really ;- ). But only one thing i missed in every plugin you wrote.
    Normally i need to send some extra data to the server ( like session id or user id ). So i rewrite every plugin for a special option “htmlData” where i can define more post|get data, which are send to the server (eg. User ID …. ) .

    But thanks for the great job you do here.

  23. 29. May 2007 |14:14

    Sorry i am wrong ;- ( You have do this in your plugin.

  24. 29. May 2007 |17:35

    @Carsten: I need to try out your first proposal. It sounds like a good idea.

    I’m not sure about your second idea, could you explain that in some more detail? Thanks.

    @Erik: No worries, eh? :-)

  25. khoker
    29. May 2007 |18:44

    Jörn,

    Just a reminder you might still want to update your jquery library to fix Safari to work with the autocomplete plugin. Your jquery library at http://jquery.bassistance.de/autocomplete/jquery-1.1.2.pack.js appears to be a bad copy. It is dated:
    $Date: 2007-02-27 17:18:47 -0500 (Tue, 27 Feb 2007) $

    There is something wrong with that version. If you drop in a new pack.js, your AutoComplete examples will work with Safari.

  26. David Anastasiu
    29. May 2007 |21:56

    I like the plugin a lot but how can I get it not to cache results? Is that possible?

  27. 31. May 2007 |09:28

    @khoker: Ah yes, gonna do that.

    @David: Try setting the cacheLength option to 1 (as described in the API docs).

  28. 6. June 2007 |19:56

    Hey nice work as always. I am using this to pull employee data from LDAP via a little ajax call so that employees dont have to fill out so much data on the forms. Its working great, keep up the good work!

  29. Jeff S.
    6. June 2007 |22:00

    I was checking DylanVerheul’s version and sent off some comments to him. He pointed me to this project. I’d like to provide you with more or less the same issues that i encountered earlier.
    I really don’t mind spending the time and getting these fixed/added if you want me to. What i don’t want is to extend your autocomplete which extends someone else’s autocomplete which in turn extends…

    1. Can I show the list by just tabbing into the field i.e. onFocus event or changing minChars to -1 or something? It would be nice to have this builtin or at least be able to call a function to “drop” the list.

    2. It would be nice to have this extend the Interface’s AutoComplete to have effects integration.

    3. If you select an item and tab away, the original tab order gets screwed up. If you tab away from the input field you’re OK but if you tab away right after a selection is made, then you’re off.

  30. 7. June 2007 |13:39

    @Jason: Its great to hear about your stuff being actually used somewhere, thanks :-)

    @Jeff: The long-term plan is to replace Dylan’s version and Dan’s mods with this one. Your help is appreciated!

    About your issues:
    1. Not yet, but as the plugin already supports being setup to display the selectionbox after a double click or another click on a focused field, it should be easy to display it on focus.

    2. I’d appreciate any research or examples on that topic, I haven’t worked with Interface yet.

    3. That may be caused by blurring the field after the user selected something. I still don’t know why that is actually happening. If you want to investigate that, search for the comment “make sure to blur off the current field”. Maybe simply removing that call to blur fixes the tabbing issue.

  31. Jeff S.
    7. June 2007 |19:31

    Re: Tabbing screwed up after selection is made
    With regard to item 3 above (tabbing issue) I made a quick fix. I will get back to you on all others. Thanks for giving me this opportunity:

    The fact that a selection is made (on a non-multi) indicates that the user is done with the field and is ready to move on. Had we not have any autocomplete on an input field, a Tab would just do as such. Therefore, instead of blurring the field, I simply raised a TAB key event. Here’s the changes (tested only in IE7 & Firefox 2):

    case KEY.TAB:
    case KEY.RETURN:
    	if( selectCurrent() ){
    		// make sure to blur off the current field
    		if( !options.multiple ) {
    		// JS: No need to blur; just tab away
    		// JS: $input.blur();
    			event.keyCode = KEY.TAB;
    		// JS: Made the following conditional
    		// JS: Basically if we're going to issue
    		// JS: a tab event we need it to bubble
    		} else {
    			event.preventDefault();
    		}
    	}
    	break;
    
  32. Jeff S.
    7. June 2007 |21:32

    correction on the above: the event.keyCode=… does not work in Firefox.

  33. Jeff S.
    7. June 2007 |22:30

    Correction to the correction: It actually works in FireFox 2.0 as well.

    I know i’m looking very unprofessional here but here’s another way to simulate a tab keypress if manipulating the event object does not work:

    if( !options.multiple ) {
    //JS: If this doesn't work for some reason
    // event.keyCode = KEY.TAB;
    // JS: then use this:
    $input.value += "\t";

  34. 7. June 2007 |22:59

    Appending a tab to simulate a tab-key-press? Oh well, browser scripting keeps surprising me.

    We should check if that behaviour should also occur for return.

  35. 8. June 2007 |07:04

    Hi Jörn, nice work here. Really appreciate your effort to integrate and improve autocomplete plugin from various authors before.

    I’m having the same problem as Carsten’s using the compressed version (jquery.autocomplete.pack.js). Is there a proper compressed version available to download?

    Thanks again.

  36. 8. June 2007 |17:28

    @Michael: Currently not. I’ll try to fix that as soon as possible.

  37. 9. June 2007 |00:17

    I see. Good luck with 1.0. :)

  38. 15. June 2007 |17:02

    After some playing about, I managed to get this to work nicely with CakePHP :) I’ve now implemented it in my application. Thanks for the hard work Jörn

  39. 15. June 2007 |17:33

    @Tane: Cool. Please share a link if you can.

  40. 22. June 2007 |19:43

    The script appears to fail if an autocomplete value starts with “eval”

  41. 23. June 2007 |12:25

    @blake: I’ll look into that.

  42. Marcus Biesioroff
    25. June 2007 |21:55

    Just WOW :D nice work

  43. bjoern
    28. June 2007 |23:23

    hi jörn,
    first of all i really have to write, “thanks for the nice work, great stuff dude!” and of course i will come up with a request for help ;). it’s about the known issue “mustMatch”. it just doesn’t work for “false”. in my case it could be that users type in data-items which are not listed in the recommendations from the autocompleter, but it just doesn’t work. the script always autocompletes the input. are there any updates on that?

    would be nice if you could give some helpful response.
    thank you
    bjoern

  44. 29. June 2007 |17:12

    @bjoern: mustMatch is off by default, but the issue you have is something else. Thanks for reporting. Its simply something we haven’t considered yet. I’ll remove the select-proposed-value-on-tab code, that should do the trick.

  45. Alex
    3. July 2007 |09:53

    Thanks for your great work.

    I have met one problem.

    I am from Asia. I want to return gb2312/big5 results in searh.php. But, unfornately, when I typed some gb2312/big5 characters, nothing happened.

    //I added the following statements after
    //”Heuglin’s Gull”=>”Larus heuglini”,
    “上海”=>”上海”,
    “北京”=>”北京”,
    ……

    Could you help me?

    THanks a million.

  46. 3. July 2007 |10:12

    @Alex: I’m no encoding expert. But I know that PHP is rather stupid when it comes to encodings, eg. you have to use special functions to handle UTF-8. So my guess is that you need to en- or decode those strings before processing them with PHP. Please post this to jQuery’s mailing list, there are users with much more experience on encoding stuff.

  47. patrick
    4. July 2007 |16:35

    it seems that the json-example doesn´t work the way it is described above. unfortunately, I don´t have a solution but maybe someone else can jump in …

  48. 4. July 2007 |19:41

    @Patrick: Could you give a bit more detail? I’m not sure what exactly you are referring to and what isn’t working for you.

  49. patrick
    4. July 2007 |21:16

    .getJSON(“my_backend.php”, function(data) {
    $(“#input_box”).autocomplete(data);
    });

    i´m probably missing somethin here, but shouldn´t the above script start with $(#input_box”).autocomplete(…?

    btw, i´m trying to retrieve remote data in json-format. autocomplete is working when the data is sent as a list, but not with json. of course I can use the list-format, but it seems a bit strange to me to do the splitting with js afterwards.

    thanks,
    patrick

  50. 4. July 2007 |21:26

    @patrick: That examples downloads the data only once, and the works with it like its “local” data. In contrast to remote data which is requested again and again.

    Working with remote json data is currently a bit ugly. The API isn’t very friendly for custom parsing and the documentation isn’t complete. I’ll try to work on that.

    It could help a lot to get an example of your JSON format and how you’d like to use it.

  51. patrick
    4. July 2007 |21:58

    I see. Thanks for the answer.

    My JSON data is basically a set of movies (id, title and director) in this format: [[5, movietitle, director], [6, movietitle, director], [7, movietitle, director], …]
    btw, I´m working with django and using simplejson (python).

    In general, I´d prefer XML or JSON-format over the list-format.

    thanks,
    patrick

  52. patrick
    4. July 2007 |22:01

    quick note: autocomplete (resp. the jquery-pack) still crashes safari (but I guess you know that).

  53. Andrew
    5. July 2007 |08:19

    Jörn: This is a really good pluggin, and works very well with an Oracle database and lots of records. Many thanks.

    Do you have any tips on how to customise so that I can capture a value and ID number from the database and enter the ID in a hidden field when value selected in the autocomplete list?

    Also described by Erik Seifert 29. Mai 2007 |14:03

    Regards, Andrew

  54. 5. July 2007 |08:19

    @Patrick: Until improvements are done in that area you can refer to the email-json-example. Here is it’s code:

    $("#suggest13").autocomplete(emails, {
    	minChars: 0,
    	width: 310,
    	matchContains: true,
    	formatItem: function(row, i, max) {
    		return i + "/" + max + ": \"" + row.name + "\" < " + row.to + ">";
    	},
    	formatResult: function(row) {
    		return row.to;
    	}
    });

    Stupid me should really replace that packed jquery version. Sorry for ignoring that so long.

  55. Andrew
    5. July 2007 |11:08

    Jörn, are there differences between the tests and examples on your site and the download files? With the download, the Multiple Birds (remote): using the hidden input displays data in the autocomplete as

    “Great Bittern” =>”Botaurus Stellarus”, (id: undefined)

    and populates the hidden input with undefined.

    I think this is the example I would like to follow.

    Thanks

    Andrew

  56. 5. July 2007 |12:09

    @Andrew: They are supposed to be the same. I’ll check that.

  57. Andrew
    6. July 2007 |09:27

    Jörn, can you advise the format that data should be output from the backend database when working with a value and an ID?

    search.php suggests

    “Common Redshank”=>”Tringa totanus”,

    is => used as a separator or delimiter?

    With the download, the Multiple Birds (remote): using the hidden input displays data in the autocomplete as

    “Great Bittern” =>”Botaurus Stellarus”, (id: undefined)

    and populates the hidden input with undefined.

    Can you advise how to correct this?

    Thanks very much.

    Andrew

  58. 6. July 2007 |17:16

    Concerning any missing semicolons in the uncompressed code:

    Searching for this regex pattern with a handy editor, such as notepad++, should provide you with the spots that lack it:

    ^[ ]*[^/]*[^;{}(]$

    Greetings…

  59. 8. July 2007 |13:40

    @Andrew: That syntax is just the data-definition in PHP, not the format it uses for the AJAX response. Firebug is a great tool to look at the actual response. In that case each entry is seperated by a linebreak, and name/id pairs are sperated by a pipe (“|”).

  60. 8. July 2007 |13:40

    @Olaf: Thanks for that.

  61. Mariak
    10. July 2007 |15:42

    Thank you for Great Work… :)
    But In IE7 autocomplete control lose focus :(

  62. 10. July 2007 |18:07

    @Mariak: That should happen in all browsers, so far i was “by design”. Though it looks like that was actually a workaround for a different issue, and it should be removed.

  63. Mariak
    11. July 2007 |13:26

    Some more things:
    If I use ajax and retrieve few columns delimited by | and rows by \n, I can view what i want with formatItem and formatResult, but autoFill:true always use first column, maybe will be good to do that we can refer some function witch will return value for autofill, of course there is workaround change columns order returned with ajax.

  64. Mariak
    11. July 2007 |13:34

    when will be new version? For very important is “- fix mustMatch”
    Thank’s

  65. Till
    12. July 2007 |00:16

    Great plugin.

    But how to use this twice on the same input field? If I do something like

    $(“#myTextField”).autocomplete(["aa1", "aa2", "aa3"]);
    $(“#myTextField”).autocomplete(["aa4", "aa5", "aa6"]);

    there are two suggestion boxes. Is there a possibility to reset it manually? Or – because I don’t see a case where this could make sense – you simple reset it automatically if the field was initialized with an autocomplete already.

    Thanks
    - Till

  66. Mariak
    12. July 2007 |09:34

    Hi,
    It will be perfect have some function call there in latest source code that i find

    function hideResultsNow() {
    ….
    function (result){
    // if no value found, clear the input box
    if( !result )
    {
    $input.val(“”);
    FUNCTION CALL
    }
    }
    ….
    };

  67. 12. July 2007 |17:53

    @Mariak: I think the autofill-issue is fixed in the latest revision. I’ll take a look. A new version is delayed till I finish work on validation 1.2, except when someone helps with development.

    That callback should be easy to add. Can you give me an example about how you’d use that? Would be very helpful to document it.

    @Till: It looks like you actually just want to replace the data used for autocompletition, right? You could try this:

    $(”#myTextField”).autocomplete([”aa1″, “aa2″, “aa3″]);
    $(”#myTextField”).setOptions({
      data: [”aa4″, “aa5″, “aa6″]
    }).flushCache();

    Currently it won’t work because there is no way to reinitialize the local data. Doh.

    Another approach is to remove all event listeners using unbind.

    $(”#myTextField”).autocomplete([”aa1″, “aa2″, “aa3″]);
    $(”#myTextField”).unbind().autocomplete([”aa4″, “aa5″, “aa6″]);
  68. Mariak
    12. July 2007 |23:31

    Latest version I get from http://dev.jquery.com/browser/trunk/plugins/autocomplete
    autofill-issue now is not fixed. For this fix I am not to smart :).

    I do some modification (a little bit :)), how i can send to you with explain, maybe you will find it good to take these changes.

  69. 13. July 2007 |10:11

    Just send a mail, you can find the address on the about page (“Obligatorisches”).

  70. Ian
    14. July 2007 |04:31

    @bjoern 28. Juni 2007 |23:23
    @Jörn 29. Juni 2007 |17:12

    I was having a similar problem. I am writing my code so that if the user enters a value that is not in the autocomplete list, it is added. However, if the first couple letters match, the dropdown does not go away when they stop matching. So, when he enters the new term and presses TAB, it filled in with the first value and blurs.

    It was not ideal for me to disable “matchFirst”, because I like the functionality it provides.

    To fix this, in the “request” function, if it fails, I have it hide the select:

    After line 373:
    failure(term);
    add:
    select.hide();

    To me it makes sense to hide the select box anytime the current value has no matches. I tested this fix, but I wanted to check with you to make sure it doesn’t have any bigger problems.

    Thanks for a great script!

  71. Till
    17. July 2007 |14:57

    I not only want to replace the data, but to re-initialize the whole auto complete input field.

    But your 2nd suggestion (with unbind) works properly.

    Thank you!

  72. TiGeR
    17. July 2007 |16:42

    Hi, is it possible to have some data for one selection ?

    i explain , i have 3 choices in suggestion list, each of these have background infos like the name, address, zipcode.
    when i choose one, the name and address put in textarea and zipcode in input tag ?

    Thank you !

  73. 17. July 2007 |17:46

    @Ian: That looks like it should be configurable via plugin options. Both behaviours have there value. Thanks for the code anyway.

    @Till: Okay, thats cool. Using unbind() to clear everything looks like an approach that should propagated as the standard. Though if you’d mix masked input with autocomplete you’d have to reapply both, but I think that is acceptable.

    And with Brandon Aarons behaviour plugin it would be even trivial to control reapplying.

    @Tiger: That is possible, though not very good documented yet. I’ll work on documentation, until then please take a look at the source of the demo page and the example code on this page. The result()-method should be mostly what you need.

  74. TiGeR
    17. July 2007 |18:30

    Jörn, thx for your reply …

    I tried to used result() method .. but o have error, result() is not a function …

    Other question, backend php script, how must i return different values ?

    Thank you.

  75. 17. July 2007 |19:58

    @Tiger: Could you post an example page?

  76. TiGeR
    18. July 2007 |10:47

    Hello Jörn,

    I use your code sample on the demo page … Just the backend script are different …
    function formatItem(row) {
    //var row = row.split(“|”);
    return row[0] + ” (id: ” + row[1] + “)”;
    }
    function formatResult(row) {
    return row[0] + “\r\n” + row[1];
    }
    $(“#ac_me”).autocomplete(‘modules/invoices/action.php’, {
    multiple: true,
    delay: 150,
    width: 260,
    //minChars: 2,
    formatItem: formatItem,
    formatResult: formatResult,
    extraParams: {
    main: “autoComplete”
    }
    });
    $(“#ac_me”).result(function(event, data, formatted) {
    var hidden = $(this).find(“..+/input”);
    hidden.val( (hidden.val() ? hidden.val() + “;” : hidden.val()) + data[1]);
    });

    Thank you for your help …

  77. TiGeR
    18. July 2007 |10:49

    Maybe the backend script can help you … i post it

    $res = mysql_query(“SELECT DISTINCT id,company_name,address FROM cpx_customers WHERE company_name LIKE ‘”.$_GET['q'].”%’”) or die(mysql_error());
    while($data = mysql_fetch_array($res))
    {
    echo $data['company_name'].”|”.$data['address'];
    }

  78. 19. July 2007 |13:22

    Thanks for a powerful and useful script :)
    You may already have provided some sort of option, that I have missed, to counter the following issue. If not, I will suggest the addition of a unique generated anti cache parameter in the request function, like this:

    data: jQuery.extend({
    q: lastWord(term),
    limit: options.max,
    antiCache: new Date().getTime()
    }, options.extraParams),

    Otherwise especially Internet Explorer will generally reuse a cached page rather than accessing the query script, which albeit can make sense unless the data in question is frequently updated.

    Cheers,
    nuxx

  79. TiGeR
    19. July 2007 |15:35

    Jörn,

    I replaced the js file and now it works … but if I put “a” in my textarea, it works and it search in database some name starting with “a” … if I type a second character, it doesn’t take the first … so it search in database for a name starting with the second character … i tried to delay more but no success … there is a way to resolve that ?

    Thanks a lot

  80. TiGeR
    19. July 2007 |16:24

    I found … sorry it was my code … thanks a lot for all !!

  81. Bruce MacKay
    20. July 2007 |11:56

    Hello Jörn, Thanks for the plugin. I have it working fine, but I’m being frustrated by a js error reported by Firebug for which I cannot find my fault – I’m sure it’s mine and not yours!

    element has no properties
    while(element.tagName != “LI”)

    … which comes from the function
    function target(event) {
    var element = event.target;
    while(element.tagName != “LI”)
    element = element.parentNode;
    return element;
    }

    Any ideas of what I am not giving it that it requires? This error comes when I receive items from an AJAX call. When I go to select one of them, the error is triggered as I move the cursor over an item.

    My document.ready function call is:
    $(“#s_name”).autocomplete(“scripts/ajax_studentroll.asp?w=s_name”, { minChars:2, matchSubset:1, matchContains:1, cacheLength:10, selectOnly:1,formatResult: formatResult });

    Can you help here?

    Thanks,Bruce

  82. Andy
    20. July 2007 |21:51

    How can i use this with POST method, i’m using clean urls in codeIgniter and query strings simply won’t do, because changing server side framework behavior only to get smaller feature to work is no good :)
    which part should i modify ? i’m not really good with javascript, that is why i use jQuery :P
    Maybe you can add this as an option, very useful for people using using REST, SEO and stuff.

    Cheers

  83. Roger
    20. July 2007 |22:09

    Hey Jörn,

    Great library! I am having one issue right now though that you may be able to help with.

    I am looking at doing a lil bit of styling on my result set via the formatItem method such as below:

    function formatItem(row) {
    return ” + row[1] + ” + row[0] + ”;
    }

    However, this causes the search to match the html as well. IE./ if I type sp.. I see the HTML as if it’s rendering with htmlspecialchars. Any ideas how to prevent this?

  84. Roger
    20. July 2007 |22:11

    err.. the above formatItem method should look like the following.

    function formatItem(row) {
    return ‘<span style=”float:left;width:40px;”>’ + row[1] + ‘</span><span style=”float:left;”>’ + row[0] + ‘</span><br style=”clear:left;”>’;
    }

  85. Joe
    20. July 2007 |23:40

    Has anybody implemented the multiple autocomplete one calling an jsp/java class/json instead of a php? If so, could you please provide a sample?

    Thanks
    Joe

  86. Travis Phipps
    23. July 2007 |15:40

    Has anyone else noticed that the packed version of the script has an error? I’ve also tried packing it myself, but I get the same error (missing semicolon). I’ve tried searching through the code to find the error myself, but I haven’t had any luck.

    Anybody have a packed version of this code?

  87. Gufy
    24. July 2007 |17:51

    Jörn, thanks a lot for your work over this plugin.

    I found out that the problem with UTF-8 not being correctly sent can be solved on the server side by applying (PHP) rawurldecode() function, which decodes the Unicode characters sent by GET method and therefore URL-encoded.

  88. Travis Phipps
    24. July 2007 |19:55

    I was finally able to get a working, packed version. I downloaded the latest code from SVN, then created a minified version which worked fine. Then I was able to pack that version and it works now in FF and IE.

    I’m still not sure why the already packed versions were erroring out for me.

  89. 25. July 2007 |17:27

    @Tiger: Okay, great to hear it now works.

    @nuxx: That looks like a good suggestion. It won’t hurt to just send that parameter, its up to the serverside whether it uses it or not. And the overhead is minimal. Thanks, I’ll add that.

    @Bruce: Hum, something is missing there. Could you provide a simple test page for that issue?

    @Andy: You could use $.ajaxSetup to set all usage of $.ajax to use type: “POST”. In any case I’ll think about adding an option that lets you pass through additional arguments to $.ajax, like type.

    @Roger: I can’t see yet where the problem actually occurs, could you provide a test page? That would help a lot.

    @Joe: I wrote an example for my jQuery article for the german Java Magazin – it should be included in the next issue. I’ll try to upload that example on this site as well.

    @Travis: Sorry for ignoring that issue too long. They are now all fixed, and it was rather painless using Aptana. Please give the latest revision a try.

    @Gufy: Thanks for that hint! I’m sure it will save others a lot of trouble. I’ll include it in the docs and examples.

  90. 25. July 2007 |17:28

    @Travis: Oops, okay. Anyway, now even the packed version (currently only in SVN) should work.

  91. 26. July 2007 |17:12

    Jörn, I found a small bug when using the autocomplete plugin with Jquery.NoConflict(); Instead of doing (jquery.autocomplete.js, line 156):

    // Create jQuery object for input element
    var $input = $(input).attr(“autocomplete”, “off”).addClass(options.inputClass);

    You should do:

    // Create jQuery object for input element
    var $input = jQuery(input).attr(“autocomplete”, “off”).addClass(options.inputClass);

    Notice the usual jQuery dollar which causes issues with the NoConflict mode of operation? Just change it into jQuery and it works fine.

    Thanks to you and the other contributors for this fine plugin!

    All the best,

    grtz
    BjornW

  92. 27. July 2007 |14:02

    @Bjorn: Thanks for the report, gonna fix that soon.

  93. 30. July 2007 |08:57

    Thanks for continuing the development of this great jQuery plugin!

    I’m impressed at how quickly I was able to implement autocomplete functionality with it.

    I was wondering if it was possible after .autocomplete was called on a field to modify the ‘extraParams’ or if it was possible to remove the autocomplete and readd it with different settings.

    Thanks

  94. Chaim
    31. July 2007 |14:04

    Hi Jörn,
    Great plugin!, there seems to be a problem with it (not sure if it’s a bug, or me.) “minChars” doesn’t seem to work with any number other than 1 or 0. (Tested with Jquery 1.1.3.1, Jquery 1.1.2, Firefox 2.0.0.5 and IE7 tested)

    This code works:

    $(“#autoCompleteStaff”).autocomplete(names, {
    minChars: 1,
    max: 12,
    autoFill: true
    });

    This does not:

    $(“#autoCompleteStaff”).autocomplete(names, {
    minChars: 2,
    max: 12,
    autoFill: true
    });

    Thanks,
    Chaim

  95. Chaim
    31. July 2007 |15:33

    *update from previous comment

    It appears that minchars does work for a remote data array, but not for the local one.

  96. Claudia
    1. August 2007 |12:12

    Hello Joern

    Short note: In the autocomplete.js file (revision 2481) you use the function ‘below’ which does not exist unless I download the jquery.below.js from svn. Maybe you should mention this in the docu somewhere (and link to the file).

    Cheers

    Claudia

  97. 3. August 2007 |16:19

    @Rajiv: Please give these a try:

    $("input").unbind().autocomplete(...);
    $("input").setOptions({
      extraParams: { ... }
    });

    @Chaim: Thanks for the report, I’ll check that.

    @Claudia: Right, that is rather inconvienent. I’m not sure yet if I’ll stick with that or revert to dimensions or to the original solution, therefore the lack of docs.

  98. Bjoern
    5. August 2007 |23:44

    Hi Everyone,
    I followed this thread until here and was thinking about the packed version of the jquery.autocomplete.js in 1.0 alpha and it didn’t work for me either. I haven’t taken the latest revision from the trunk, since Jörn uses now the below-stuff instead of the dimensions-plugin (maybe just temporarily), blabla… Anyway, to cut a long story short. I took a look at Dean Edwards site and found this: http://dean.edwards.name/packer/usage/sample.html. I added some semicolons at the end of function declarations and it works now.

    Hope I could help a little.
    Greetinx from Berlin
    bjoern

  99. 7. August 2007 |11:56

    Hi Jörn,

    Great plug-in, thanks for contributing this to the masses.

    I was wondering if it is possible to bind an function to when data is requested from a remote serve so that I can supply some visual feedback to the user that something is happening? And when the data has been returned, not on the result event.

    Not that the lookups should take that long…

    Thanks again,

    _d._

  100. 7. August 2007 |16:04

    @Dorian: Your best bet is to simply use jQuery’s built in ajax notifications.

  101. 10. August 2007 |10:54

    Hi Jörn,

    First thank you very much for this really nice plug-in. It is really much powerfull !

    Now, I would like to use autoFill in combination with matchContains.
    The way I think it should work is quite simple (I think;-) : it should autocomplete the whole entry as soon as the text entered is found, once or more, inside it.

    Do you think this could be implemented ?

    Christophe

  102. 10. August 2007 |11:15

    I also will need the mustMatch option.
    Do you plan to implement it ?

    Christophe

  103. Ukasz
    10. August 2007 |14:27

    Hi Jörn,

    Great plug-in :),

    I have problem with IE (6.5) and jQuery 1.1.3.1.
    Dropdown (Some dropdown) is still visible when I open autocomplete list.
    Can You help me?

    Thanks,
    Ukasz

  104. TaMeR
    10. August 2007 |14:51

    I have following css style and with the z-index (any number) the result is hidden somewhere in the backround

    #Content {
    position: absolute;
    left: 14%;
    top: 6%;
    width: 60%;
    height: 88%;
    background-color: #aab8ca;
    border: none;
    overflow: auto;
    padding-right: 0.50em;
    /* z-index: 30; THIS LINE BREAKS THE AUTOCOPMLETE IN POSTCODE FOR SOME REASON*/
    }

  105. Kumar Ram
    11. August 2007 |01:26

    Jörn,

    Found a minor issue – if the “minChars” is set to a length greater than 1 – the autoselector does not popup. So I changed the following code for it to work:

    // Changed from: for (var i = q.length – 1; i >= options.minChars; i–)
    // Changed to: for (var i = q.length – 1; i >= 0; i–) {

    HTH

    Regards,

    Kumar

  106. 12. August 2007 |14:30

    @Christophe: matchContains together with autoFill is definitely planned. And mustMatch is mostly working in the latest revision.

    @Ukasz: The bgiframe plugin is supposed to fix that. Have you included it? Maybe an update to its latest version helps.

    @Tamer: Do you have some elements with position: relative on your page? That is a likely culprit.

    @Kumar: Thanks for the fix. Gonna give that a try.

  107. Martin
    13. August 2007 |17:25

    I am having trouble using Autocomplete inside a Thickbox AJAX modal window.

    The problem: If the browser window is scrolled past the fold and a Thickbox window containing an Autocomplete field, the Autocomplete results are displayed as if the browser had not been scrolled. They are displayed above the field.

    This bug occurs in IE 7, Firefox 2.0.0.6 and Konqorer 3.5.6
    This bug DOES NOT occur in IE 6 and Opera 9.21

    I have tested this with the current Autocomplete, Jquery 1.1.2 and 1.1.3.1, the current Thickbox 3.1 and the supplied Dimensions and version 1.1

  108. Martin
    13. August 2007 |22:50

    Issue with marking up the formatItem() function:

    I would like to have a marked up list displayed for autocomplete, so the formatItem functiion looks as follows:

    function formatItem(row) {
    return row[0] + \”Position: \” + row[2] + \”\”;
    }

    This works most of the time, unless you just type the letter ‘a’ into the autocomplete field. Then the highlighter breaks things, so the list item looks like:
    Aardvarkan class=’sm

  109. Martin
    13. August 2007 |22:54

    Sorry,

    I will try this again. Some of my code was cut out. The function should look like:
    [code]
    function formatItem(row) {
    return row[0] + \"Position: \" + row[2] + \"\";
    }
    [code]

    And the generated html after you enter 'a' in the autocomplete field:
    [code]

    Lionel
    A
    lonzo

    a
    n cl
    a
    ss='sm
    a
    ll-text'>Position: NONE

    a
    n>

    [code]

  110. 13. August 2007 |23:59

    Hi there,

    Firstly; thanks for an excellent plugin! Just a quick question, though. I have multiple input fields on my page which are all assigned to a class called “attribute”. What I would like to do is automatically assign a different extra parameter containing the field name to each of my inputs. Then, my backend page will use that extra parameter to only return results that are relevant to the box you are typing in. (My input name might be “attribute[23]” which my backend will convert to an ID of 23 for use in its database query.)

    This will eliminate the need to specifically assign the autocomplete function separately to all inputs.

    Can this be done? Hopefully I’ve explained myself clearly enough!

  111. 15. August 2007 |17:55

    Hi Jorn,

    This is a brilliant plugin you’ve got here but I’m having a few problems with result().

    I have a multiple select textarea that gets its data remotely. On submitting the complete form, I want to take the result of the search and place it in a hidden input so that it’s posted through with the rest of the form. However, I don’t want the result to trigger when i’m still selecting in the box.

    The problem is, when i click the submit button, it doesn’t post the data through. I’ve tried it with a normal button and the data isn’t submitted until I click the button twice!

    Any ideas on work-arounds or fixes etc? Code is below.

    Many thanks
    Steve W

    $(“input#submit”).click(function() {
    $(“#squadSearch”).search().result(findValueCallback)
    });

  112. 19. August 2007 |09:46

    is this plug-in could do an increment remote search?, i mean , when i type “a”, the result will return the list which contain “a”, and when i then type “b” after “a” , the result will return the list which contain “ab” realtime?

    thanks.

    BTW: why i can use <div> in the formatItem function, but <span> is ok?

    when i type “a” , the result show, that’s ok, but when i “backspace” the “a” and retype “a”, it seem the autocomplete do not work now, i must double click it then it will work again, is there something wrong?

  113. Christophe
    20. August 2007 |16:42

    Thanks for your answer, Jörn, I am looking forward to the next version ;-)

  114. Jim
    20. August 2007 |17:35

    Trying to get the packed version working but get errors – I see in the comments above that has been fixed in the version in the repository – where can I find that? Do you have URL?

    Thanks for the great plugin!

  115. Till
    21. August 2007 |11:28

    Next issue I am facing: If I set option matchContains to true, it should “look inside”, i.e. according to your doc “ba” should match “foo bar”.

    But I am trying this with these three values: “foo bar”, “foo foo”, and “foo far”, and if I enter “b” (or “ba”) nothing matches, if I enter “f” all three do match, and if I enter “fa” the last one matches.

    The problem seems to be that the cache is implemented with a first-character hashtable, so only after matching the first character, the latter ones are searched for.

    Am I doing something wrong, or is this a bug? Any help?

  116. 21. August 2007 |14:23

    I you return XML from the server in the form of:

    FreeNode: irc.freenode.net:6667]]>

    irc.oftc.net:6667]]>

    irc.undernet.org:6667]]>

    Then you can do something like:

    function parseXML(data) {
    var results = [];
    var branches = $(data).find('item');
    $(branches).each(function() {
    var text = $.trim($(this).find('text').text());
    var value = $.trim($(this).find('value').text());
    //console.log(text);
    //console.log(value);
    results[results.length] = {'data': this, 'result': value, 'value': text};
    });
    $(results).each(function() {
    //console.log('value', this.value);
    //console.log('text', this.text);
    });
    //console.log(results);
    return results;
    };

    $(YourObjHere).autocomplete(SERVER_AJAX_URL, { parse: parseXML });

    That’ll work for XML ;)

    Maybe a xml parser could/should be added to this plugin ;)

  117. 21. August 2007 |14:31

    The JS Code:
    http://pylonshq.com/pasties/424

    The Example XML data:
    http://pylonshq.com/pasties/423

    Hope it’s usefull…..

  118. Jim
    21. August 2007 |14:53

    Running into issues with form fields popping through the autocomplete dropdown – I’m using the lastest code from SVN. What is odd is that the older examples above don’t exhibit this behavior…

    Any ideas?

  119. alitoch
    21. August 2007 |17:18

    To Roger & Jörn :
    Concerning the “element has no properties” issue, I had to deal with it too and figured out it was a styling error :
    You have to define an inputClass and/or a resultsClass. It’s what I’ve done and now, I don’t have any error anymore when I hover any item.

  120. Christophe
    23. August 2007 |15:54

    Hi Jörn,

    I have a request :
    With the current version, the whole list appear if I type one character and then delete it.I would like the entire list to popup when I click in the textbox (I mean before I type any character).
    Don’t you think this would be a coll feature ? I think it would signify more obviously to the user that it is an autocomplete textbox.

    Would this be possible ?

    Thanks for your great work.

    Christophe

  121. Joe
    23. August 2007 |22:35

    Hi,

    I have an issue when I dynamically add textboxes and try to call autocomplete on these textboxes. This does not work in IE. It works perfectly in Firefox. Is there a workaround to make this happen? I have this requirment of dynamically adding textboxes and each needs to have autocomplete on them. When I add, I do an innerhtml to construct dynamic textboxes.

    Code is below
    var sHTML=”TextBox2″+
    “”+
    var sScript=””;
    sScript = sScript + “$(document).ready(callAutoComplete);”
    sScript = sScript + “”;
    newdiv.innerHTML = sHTML + sScript;

    function callAutoComplete(){
    $(“#textbox2″).autocomplete(“auto_complete.php”, {
    delay: 10,
    width: 180,
    minChars: 2,
    matchContains: true,
    formatItem: formatItem,
    formatResult: formatResult,
    selectFirst: true,
    max: 10
    });

    }

    Please let me know. Thanks !

    Joe

  122. Joe
    23. August 2007 |22:39

    OOps… in the above code the angled brackets are removed !!!

    anyways, the sHTML will have the form element ‘textbox2′
    and the sScript variable will have the script tag with ‘defer’ on it and the script tag will be closed at the end of the inner html.

    Thanks !
    Joe

  123. David
    24. August 2007 |10:21

    Autcomplete a text-input with data received via AJAX. Please one code for testing if is possible.
    Thank you.

  124. 24. August 2007 |16:18

    @Martin: I’ll now have testing and fixing with thickbox on my todo list. Should be included in the next release.

    About the formatting issue: Could you send me the related code via mail? That would help a lot. Thanks!

    @Matt: I’ll add support for extraParams to be a callback. That should solve your problem.

    @SteelSoftware: Try to assign the callback first via result(), then call search(). I’ll change the names, they aren’t very helpful.

    @Dou Wen: Incremental search should work, that is what the plugin is supposed to do. formatItem is definitely quite buggy, that should be fixed in the next release.
    I’ll check backspace and entering the same. Thanks for the report.

    @Jim: Try this packed revision.

    @Till: Looks like a bug in the cache-implementation. Thanks for the example, gonna check that.

    @Pedro: That looks like an interesting addition. I’ll add at least an example, and maybe support to ease the parsing, if possible. I can’t account for all possible xml formats.

    @Jim: Dropdowns peeking through should be fixed just by including the bgiframe plugin. Did you add that?

    @alitoch: Thanks for the report. I’ll try to fix that or at least document it.

    @Christophe: Currently that works with a double click, depending on the configuration. Check the demo and double click in the month(local) or email(local) fields.

    @Joe: Try this:

    $("<input>").appendTo("#mydiv").autocomplete();

    @David: Please take a look at the examples. There are both examples for local data and for data received via AJAX.

  125. murwazy
    29. August 2007 |11:20

    @Jörn: please add support for extraParams to be a callback.

    please please :-)

    i need submit current value of a select with query.

  126. seb
    29. August 2007 |13:28

    Hi Jörn,

    I wonder why, in the remote example, when I type “b”, the results include rows starting with others like “Little Grebe”, “Spoonbill”.
    It doesn’t work like local data who the autocomplete plugin returns only rows starting with the type selected.
    Is it normal?

  127. 30. August 2007 |21:10

    Danke, sehr cool :)
    Es lebe OpenSource :D

  128. 31. August 2007 |18:16

    @murwazy: The latest revision accepts callbacks for each extraParam. That is, you can mix static parameters with dynamic ones.

    @seb: The remote search is implemented as a “contains”. It just matches all elements that contain the search string. The local examples are set to match only the start. How the server side works is up to you. How the clientside works can be configured using the “matchContains” option.

  129. 1. September 2007 |05:09

    Hi Jörn,

    Thanks for the great script and support provided in this forum!

    I would like to ask you or anyone on this forum if they can help me fix what is probably a trivial problem for non-noobs, me being a noob.

    I’m using remote example 4, have got text being returned to dropdown, and user can select this. (Cool!)

    My problem is, I can’t get value=”” in form to pick up the user selected text for validation and processing.

    My backend code:

    $q = $_GET["q"];
    $cls_mysqloperations->db_connect();{
    $sql = “SELECT * FROM console WHERE wii LIKE ‘$q%’”;
    $result = mysql_query($sql);
    }
    while ($row = mysql_fetch_array($result)) {
    $console_wii = $row['wii'];
    }
    echo “$console_wii\n”;
    $cls_mysql_operations->db_close()

    My form code:

    “/>

    Script code:

    I’m using default without formatting, and as I wrote – it returns text (names of wii games).

    I assume problem is because the output is text not a variable, but I’ve tried using value=””

    And I’ve tried using $_GET too.

    Again, this is probably trivial for yourself or someone else here who is more familiar with the javascript and PHP than myself.

    Any help appreciated.

    Thanks,

    Mike

  130. 1. September 2007 |11:26

    @Mike: Unfortunately your HTML snippets got lost in the comment system (I really need to fix that). Could you post a test page? If it is part of a bigger application, extracting the necessary parts could already help to solve the problem. Otherwise at least I can take a look and should be able to help you.

  131. 2. September 2007 |05:29

    Thanks Jorn,

    I should have noticed the missing html, but I had to pop out after posting the first time, so didn’t get to check. Don’t worry re the minor bugs on this blog/forum – they are outweighed by your great script and support!

    The html is simply the standard form field, with input, type, id, and value. I’m trying to use PHP in value=”” to either $_GET or $_POST the string returned from autocomplete and selected by user.

    eg
    ” />

    If the html above isn’t visible this time, I hope my description that I’m just using the standard form field, and experimenting with different ways to pull the selected text into value=”” via PHP, makes sense.

    The rest of my application is being built around this form, so there shouldn’t be anything else preventing the field and form picking up the value, other than my being a noob!

    My humble guess is that I’m not calling the output from the PHP/mysql query, I posted previously, correctly (in value=””) or I shouldn’t be trying to do so – but perhaps should be trying to call the result from your javascript instead. The problem is, I don’t know how to do so.

    I hope that is enough info to help me solve what will probably take you 3 seconds to fix.

    Many thanks again

    Mike

  132. 4. September 2007 |19:21

    @Mike: Seems like there is still missing a small piece. I don’t get what you are referring to with “pull the selected text into value=”” via PHP”. Maybe the comment system ripped out the interesting parts again.

    Could you post a test page for your issue? That’d make it much easier to solve the problem. If it is part of a larger system, actually extracting that test page may already reveal the issue.

  133. dan
    4. September 2007 |23:04

    It seems like no matter what I do my form gets submitted when I hit enter to choose a item from the autocomplete list.. I’m using FF2… is it just me?

  134. murwazy
    5. September 2007 |10:51

    @Jörn please give me example, i use rev1729.

    function getStockId() {
    return $(‘#stock_id’).val();
    }

    $.ajaxSetup({type: “POST”});

    $(“#contact_name”).autocomplete(“ajax_get_products/”, {
    formatItem: formatItem,
    formatResult: formatResult,
    extraParams: {
    stock_id: getStockId
    }
    });

    this code not working as I expect

  135. murwazy
    5. September 2007 |10:53

    oops:
    extraParams: {
    stock_id: getStockId()
    }

  136. Dan
    5. September 2007 |15:33

    Anyone have a way to get other field values into extraParams?

    extraParams: {
    SearchType: “FOO”,
    SearchDocType: document.getElementById(‘BAR’).value
    }

    Foo works, but the value for BAR is not submitted. Using firebug I can see the value with consile.log(document.getElementById(‘BAR’).value)

  137. 5. September 2007 |16:58

    @murwazy: Try stock_id: getStockId. That should work with the latest revision.

    @Dan: The solution should be the same as for murwazy. You can specify a callback as the parameter value, though you need the latest revision for that to work.

    About the submit problem: Can you post an example page for that? I guess a script error occurs which kills the event handler that is supposed to stop the form submit. You could add this to your page to see if an error occurs:

    $("#myform").submit(function() {
      return false;
    });
  138. dan
    5. September 2007 |20:32

    I ended up adding this:


    $("#myForm").bind("keypress", function(event) {
    if(event.keyCode == 13) {
    return false;
    }
    });

    firebug reports no errors with this strategy or yours… but without one of them the form will submit.

  139. dan
    5. September 2007 |22:18

    I’m trying to come up with a good simple example of my form submission problem… But I’m a little unsure of what code I should be using.. could you make a new zip file with all the current stuff in it?

    also, is there a reason jquery 1.1.4 isn’t being used?

    This is a great plugin… the initial demo went over great in our application. thanks.

  140. Jeremiah
    7. September 2007 |09:09

    Great tool – thank you for the work.

    I’m thinking about adding an option that says to clear the data cache each time autocomplete is used. Of course, it is possible that I am doing something wrong, so here is a clip from my HTML:


    $().ready(function() {
    $(‘#flyer’).change(function() {
    $.getJSON(‘/ajax/launch_log_flyer_rockets.php’, {flyer: $(this).val()}, function(rockets) {
    $(‘#rocket’).autocomplete(rockets, {
    minChars: 1,
    selectFirst: false
    });
    });
    });
    });


    Each time the flyer is changed, the data set available in autocomplete increases to include previous values and new values. I haven’t looked at the code yet but I figure that autocomplete is holding on to the previous values and I can add a flag to clear them.

  141. murwazy
    7. September 2007 |09:13

    @Jörn
    stock_id: getStockId
    return body of function as plain text :(

  142. Joe
    7. September 2007 |19:16

    Is there a way to get the current value of a textbox in document.ready ? I have two textboxes with autocomplete feature. the second one is dependant on the first ones value. I need to send the first textbox value as a param in the second one’s autocomplete call. Is there a way to achieve this? Please help. thanks

  143. 8. September 2007 |12:53

    @dan: I’ve simply haven’t got around to updating to 1.1.4.

    @Jeremiah: Have you tried setting cacheLength to 1? That should disable the cache.

    @murwazy: Thats weird. Can you post a test page?

    @Joe: Try this:

    $("#firstInput").autocomplete(...);
    $("#secondInput").(url, {
      extraParams: {
        firstValue: function() {
          return $("#firstInput").val();
        }
      }
    });

    You need the latest revision for that to work.

  144. murwazy
    10. September 2007 |08:47
  145. murwazy
    10. September 2007 |08:53

    @Jörn
    please update link to script source.
    rev 2750 is ok, sorry for confusion. great work, thanks

  146. Joe
    10. September 2007 |16:41

    Thanks for the info Jorn and murwazy. I did try to use revision 2750 for this, but, am getting other issues. The ones that were working previously are not.

    am getting this error ‘element.css({width:typeof options.width == “string” || options.width > 0 ? options.width : jQuery(input).width()}).below is not a function……’

    May be, I am missing something.

    Could you please point me to the link were I can get the entire zip file of the new version.

    Thanks !

  147. Aaron Barker
    10. September 2007 |18:29

    Jörn – Just wanted to give you a big thanks for a great product. I am sure I may request a feature or submit a bug at a later time, but just wanted to make sure to say thanks for the great product and support that you provide here. You are making a lot of peoples lives much easier, and I’m sure you don’t get the appreciation you deserve.

    Thanks!

  148. 11. September 2007 |09:50

    @Joe: Here is a zip file of the latest revision.

    @Aaron: Thanks a lot!

  149. murwazy
    11. September 2007 |10:36
  150. Travis Phipps
    11. September 2007 |15:27

    I noticed that the plugin uses the .eq() function which was deprecated and removed in jQuery 1.2. I was able to replace the .eq() calls with .slice() calls and get things running. Hope this helps somebody else.

    Here are the two locations to change:
    Line 658:
    Original: listItems.removeClass().eq(active).addClass(CLASSES.ACTIVE);
    Updated: listItems.removeClass().slice(active-1,active).addClass(CLASSES.ACTIVE);

    Line 690:
    Original: listItems.eq(0).addClass(CLASSES.ACTIVE);
    Updated: listItems.slice(0,1).addClass(CLASSES.ACTIVE);

  151. Travis Phipps
    11. September 2007 |17:18

    oops. The first change should be:
    listItems.removeClass().slice(active,active+1).addClass(CLASSES.ACTIVE);

    Thanks to “Wizzud” on the jquery mailing list for pointing that out.

  152. Joe
    12. September 2007 |00:02

    Thanks Jörn and murwazy for the links. But, for some reason, I keep getting the error if I use the latest js. So, what I did was download all the js and css files from this link (http://skolman.az.pl/jquery/autocomplete.html) of murwazy. It works perfect now.

    Highly appreciate you guys helping around. Thanks again !

  153. murwazy
    14. September 2007 |12:06

    @Joe
    check source of js – maybe you downloaded html page

    click at the name, scroll down and click txt or oryginal format

  154. 18. September 2007 |11:43

    When the results are more than the show limit is it not possible to be able to click the “more” section to show the next lot of the results?

    Also is it possible to simply edit where it says “more” ?

  155. 18. September 2007 |14:51

    Also is it possible to just submit the form as soon as some selects from the auto completed list?

  156. Aaron Barker
    19. September 2007 |16:01

    In trying to implement this I ran into a few Safari bugs.
    1 – The CSS user preference colors you use (Highlight, window, etc) don’t work in Safari on both Mac and Windows. So I had to use regular color references (red, #f00).
    2 – On Safari 2.0.4 when you hit enter to select an item it submits the form. It doesn’t do this on Saf 3 on Windows.
    3 – On Safari 2.0.4 when the dropdown appears it is not directly under the field you clicked in. For me it is quite a ways off to the left, but that may be dependant on what positioning is being used in the parent DOM structure. It doesn’t do this on Saf 3 on Windows.

    I have downloaded Saf 3 for the Mac, but don’t want to loose my Saf 2, so am trying to find a work around. Since Saf 3 will hopefully be released relatively soon (probably when Leopard comes out) I am not super concerned about these bugs (only 3.5% of my user base right now). But just thought I would let you know of the issues. If I do find any solutions for the Saf 2 bugs I will pass them along.

  157. 19. September 2007 |20:10

    @Travis: Thanks, fixed that. Though eq is back in jQuery 1.2.1.

    @Phunky: The “more” section was intended to be just a visual indication, nothing to interact with. Looks like it causes more confusion then it actually solves.
    You could submit the form using the result-callback-method.

    @Aaron: Could you give this demo a try on Safari 2? At least the positioning issue could be fixed.
    The CSS issue is easy to fix. I’ll replace those in the demo with some normal colors.
    The submit-stuff is ugly. Opera has a stupid bug there, too, I got that fixed by assigning a do-nothing keypress-event-handler to the input.

    I can’t test Safari 2 so your feedback is very welcome.

  158. Aaron Barker
    19. September 2007 |20:39

    Yes positioning appears to be fixed in Saf 2.

    One I forgot to mention that apparently is a major Safari pain in 2 and 3 is that if I type 3 letters and then select an item from the list, the cursor stays at the 3rd character. So if I start typing again (in a multi entry field) it starts up in the middle of the value you just selected.

    This problem is present in the windows version so you can see it there. I tried digging into it, but didn’t get very far. Gmails autocomplete works correctly in safari 2 and 3, so there is a way out there somewhere. Just have to find it.

    Thanks for the quick turnaround on the positioning and css issues.

  159. Aaron Barker
    20. September 2007 |18:12

    So I noticed in the demo you linked above you are using the ajaxQueue plugin now. I grabbed the updated jquery.autocomplete.js and dropped it in my site and it worked without the ajaxQueue on the page. Can I guess from this that it is an optional component?

  160. 21. September 2007 |10:13

    @Aaron: I’ll check the Safari-on-windows stuff, thanks for reporting.

    Yeah, the ajaxQueue plugin is optional. Including it can reduce server load when response times are high, eg. when a request doesn’t return before the user enters the next character (including autocomplete delay).

  161. Dimi Paun
    23. September 2007 |15:04

    Hi Jorn,
    I am using your 1.0-Alpha plugin (probably not the latest), but I’ve noticed
    I am left with tons of

    <div style=”display: none; position: absolute;” class=”ac_results”><ul/></div>

    in my DOM. I’m thinking these should be cleaned up, any reason why they are left about?

  162. kasper
    24. September 2007 |02:41

    i got an error using your plugin with last jquery version : “h.style has no properties” (even with compat 1.1 plugin), this error doesn’t appear with your included jquery version.

  163. ivan quintero
    24. September 2007 |21:18

    When I display the list of results in IE 6 the list apperar behind the main page content. Therefore, it is not possible to see the results.

    This only occurs in IE. Firefox and Opera work fine.

    Please help.

  164. Aaron Barker
    24. September 2007 |21:42

    A few bugs for you.
    1 – In your example where you have mustMatch and multiple if I have 3 results already entered and then my 4th doesn’t match a dropdown it empties all the previous entries as well. I would expect that it would just remove the last entry that was mistaken.
    2 – On any field if I type something that starts off with a match, but then ends up not being a match and then hit tab to go to the next field, it puts in a result from the list when I had the partial hit.

    Hopefully those make sense, I confirmed them both on your most recent demo.

    Out of curiosity is this the best way to submit bugs, or would you prefer email or using the jquery.com bug tracker?

  165. Augustin
    25. September 2007 |12:24

    Greetings Jorn.
    Congratularions for the job and the support provided to the community.
    I have a little question.
    If I try to force the text appearing in the input text via
    value=
    (where the variable has been filled with a request value)
    the result is the expected but a / is appended to the String, so I have something like exampleString/
    Why is this happening?
    Thanks for the assistance in advance.

  166. 25. September 2007 |19:36

    @Dimi: The plugin creates those elements once for each plugin call. So far assumed that the overhead of creating and removing those elements for each time the autocomplete list is displayed is higher then just creating the element once and leaving it in the DOM.

    @kasper: I’ll check that, thanks for reporting.

    @ivan: Could you post a test page for that? The issue may be specific to a certain page layout. I can’t fix that without a testcase.

    @Aaron: 1 – Good point, that is really annoying.
    2 – right, that is also a bug.

    At some point I want to move to a different form of discussion, eg. jQuery’s plugin mailing list, but so far this is fine.

    @Augustin : Seems like your example didn’t quite get through. Could you post a test page? Or send it to me via mail? Thanks.

  167. Aaron Barker
    26. September 2007 |00:48

    It looks like your latest demo at http://dev.jquery.com/view/trunk/plugins/autocomplete/ doesn’t have the bgiframe working any more. Your official demo at the top of the page is still working correctly and I didn’t see any change in the code that I could find that would cause it.

    I will keep looking but thought I’d pass it along in case you can more easily identify it.

  168. Aaron Barker
    26. September 2007 |01:11

    Looks like updating to the latest bgiframe did the trick. Not sure what it was, but it’s fixed =)

  169. Dan Sargeant
    27. September 2007 |00:20

    I think I am correct in saying that if you are using jQuery 1.2+ you no longer need the dimensions plugin – the offset method is now included in the jquery core – it seems to work without anyhow :)

  170. 27. September 2007 |11:41

    Greetings Jorn.
    Congratularions for the job and the support provided to the community.
    I have a little question.
    If I try to force the text appearing in the input text via
    value=
    (where the variable has been filled with a request value)
    the result is the expected but a / is appended to the String, so I have something like exampleString/
    Why is this happening?
    Thanks for the assistance in advance.
    http://www.playoyun.net

  171. Till
    27. September 2007 |19:57

    Hi Jörn,

    thanks for fixing that first-character cache issue. Works great, now.

    Another thing I’ve just encountered (don’t know if it’s a bug), but I am using it:

    In the latest version (r3241) the search does not work properly, due to the trimWords() function. It always assumes multiple values, but if you do have single values with comma (or other separator) it does try to handle them as multiple values, even if the options is false. So in line 340 perhaps something like the following would be good:

    if (options.multiple)
    var words = value.split( jQuery.trim( options.multipleSeparator ) );
    var result = [];
    jQuery.each(words, function(i, value) {
    if ( jQuery.trim(value) )
    result[i] = jQuery.trim(value);
    });
    }
    else {
    result = [value];
    }

  172. Till
    27. September 2007 |19:59

    Well… did I miss some syntax formatting possibilities? (and one curly brace is missing in the first line)

  173. Dimi Paun
    27. September 2007 |20:49

    Jorn, regarding the elements that are left behind in the DOM: how about a function (e.g. unregister()) that would cleanup all modifications made by the autocomplete invocation?

  174. Chris Graner
    28. September 2007 |06:43

    Thanks for the great contribution to the jQuery plugin repository!

    I’ve got the same problem as Jeff S. noted back on June 6th with the tabbing in IE6+.

    I put together a page to demonstrate (I’m working on a racing site):

    http://www.motorstats.com/wwwroot/ResultsDemo.html

    Just start typing a name in the driver field. FYI, it won’t actually process the data.

    After a ‘driver’ is selected with enter or tab, the subsequent tabbing is broken. Works fine in FF.

    I did notice, however, that it will work fine in IE if the page is churning. For example, the production page contains sifr font replacement, which wasn’t working in the demo because the appropriate files weren’t available (I removed the content). While it was churning, I could select a driver and tab away.

    I’ll continue trying to work it out but I would love some help. I’m still learning about the DOM but I’m not sure that is the issue.

  175. 29. September 2007 |12:31

    @Aaron: Thanks, I’ll update the copy of the bgiframe plugin. I could have been the IE6 detection that needed an update.

    @Dan: Good point, thanks for the suggestion.

    @murtaza: Could you post an example page for that?

    @Till: Thanks for the suggestion, I’ll give that a try.

    @Dimi: I definitely want to add that, eg. an unautocomplete that also removes all event handlers.

    @Chris: Well, thats another weird IE issue. What I can say though: I’m planning some changes to the tab behaviour, as that is currently rather ugly. The autocompletion should be canceled when you press tab, instead of selecting a value from the list and bluring the field. I hope that change fixes the issue you experience.

  176. 1. October 2007 |12:08

    Hi,

    I have some troubles with autocomplete and modal plugin (http://jquery.com/plugins/project/jqModal)

    How can i do to display results into my modal box ?

  177. Wud
    11. October 2007 |19:20

    Fantastic plugin. thanks very much.

    Just one suggestion. If you could update the urls on this website to the latest demos and plugin download page.
    Took me a while to search for the latest one (found the link on one of the threads.) But I guess someone downloading the plugin might do so from this site instead of the plugins respository and might scratch their heads regarding nifty features like setOptions etc.

    cheers.

  178. 11. October 2007 |23:15

    @bruno: Can you post a test page?

    @Wud: Good point. I’ll update those links.

  179. cam
    12. October 2007 |00:55

    Hello,

    In an older version of your plugin, I created a function that would send the selected value to a multiple select box. For example:
    appendOptionLast(sValue);

    and

    // I append a selected employee name to a select input list
    function appendOptionLast(num) {
    var elOptNew = document.createElement(‘option’);
    elOptNew.text = num;
    elOptNew.value = num;
    var elSel = document.getElementById(‘selAdminType2′);
    try {
    elSel.add(elOptNew, null); // standards compliant; doesn’t work in IE
    }
    catch(ex) {
    elSel.add(elOptNew); // IE only
    }
    document.getElementById(‘txtAdminType2′).value=”;
    document.getElementById(‘txtAdminType2′).focus();
    }

    However, I don’t see how to do this for the current version. I thought I’d suggest that you add that functionality.

    My apologies if I’m just missing something.
    Cam

  180. 14. October 2007 |12:37

    @cam: All you need should be the result-callback. Its called when a value is selected, and therefore the right place to call your appendOptionLast method.

  181. Engels
    17. October 2007 |16:19

    Hi,

    very useful plugin!

    I think, there is a bug in the highlighter: if the result contains a ‘(‘ or some other special regex char it does not work (with or without a js error, depends on the char). This chars have to be masked before do the regex, am i right?
    Maybe there is a possibility to disable the highlighting?

    Ciao, Engels

  182. Bhaarat
    17. October 2007 |23:37

    Hello

    In the demo’s you are not allowed to enter a value that is not in the autocomplete list box. How can I do this? if value is not found and user enters something and clicks ‘get Value’ that value should be outputted. Any ideas would help

  183. Dimi Paun
    18. October 2007 |03:54

    Hi Jorn,

    I now get this error:

    listItems.filter(“.” + CLASSES.ACTIVE)[0] has no properties

    Is this something that you’ve seen before?

  184. John Wards
    18. October 2007 |10:46

    Hi Jorn,

    I am getting the same error as Dimi.

    I have turned off selectedfirst as I want my users to add tags, the auto complete functionality provides lists of previously added tags but they need the ability to add their own new tags. If they enter in a new tag then put in the comma for separating the tags I get that error.

    Its on line 742.

    I am going to hack in a fix just now.

  185. John Wards
    18. October 2007 |10:53

    I’ve fixed it like this:

    selected: function() {
    if(listItems.filter(“.” + CLASSES.ACTIVE)[0]){
    return data && data[ listItems.filter("." + CLASSES.ACTIVE)[0].index ];
    }
    }

  186. Till
    18. October 2007 |16:20

    @Engels: You could do something along the lines
    term = term.replace(“(“, “\\(“).replace(“)”, “\\)”);
    to get the highlighting working even for terms with parenthesis.

  187. 18. October 2007 |16:38

    @Engels: Escaping should do the trick, until then you can just specify highlight: false to disable it.

    @Bhaarat: Use the mustMatch option for that behaviour. You may need to use the latest revision to get a working implementation.

    @Dimi: I think I’ve seen that before. Could you give the latest revision a try? The link is at the top of this page.

    @John: Thanks for the patch. I still need to figure out why that occurs at all, your explanation should help.

  188. Xavier
    22. October 2007 |13:18

    Hi, about the CLASSES.ACTIVE problem, i had the same problem, but in fact i’ve hacked it in a way that permit to add a callback on non found items , it can be usefull to trigger actions when no data is found:

    something like:

    selected: function() {
    if(listItems.filter(“.” + CLASSES.ACTIVE)[0]){
    return data && data[ listItems.filter("." + CLASSES.ACTIVE)[0].index ];
    } else {
    if (options.notFound){
    options.notFound();
    }
    }
    }

    Cheers
    xavier

  189. cam
    23. October 2007 |01:34

    Thank you! I appreciate you taking the time to respond. I’m a noob, but I figured out the result-callback once you pointed me in that direction. This is functioning very well. Thanks again.

    Cam

  190. Dimi Paun
    23. October 2007 |17:33

    Jorn,
    It seems I’m running the latest from what I can tell, revision r3618.

    Also, there is another bug: you type something in an edit with autocompletion, press enter to select an entry, then you type something
    again that has *no completion available* (so no list is displayed), you press enter, you get somehow the previous selection! (even though it wasn’t a valid completion for the current string). For example, I type “D”, I get
    Dimi
    as completion, I select it and enter. They I type “qwerty”, I get no completion,
    I press enter, I get “Dimi” again!

    This seems to boil down to the same function I have problems with, “selected”:
    selected: function() {
    return data && data[ listItems.filter("." + CLASSES.ACTIVE)[0].index ];
    }

    To prevent this we had to add a little hack as such:
    selected: function() {
    return this.css(“display”) != “none” && data && data[ listItems.filter("." + CLASSES.ACTIVE)[0].index ];
    }

  191. ignatius
    24. October 2007 |14:25

    How can I detect when no results are returned? I want to display a message when no coincidences are found.

    Thanks!

  192. Dan
    24. October 2007 |21:40

    This is by far the most complete jQuery autocomplete solution I’ve found and it seems to be working really well so far. I do, however, have two suggestions:

    1) Add an option to allow users to specify a callback to be executed once a selection has been made. I hacked my local copy thusly:

    229a230,232
    > if (options.onSelect)
    > options.onSelect($input);
    >

    2) Allow for an alternate query string argument to pass to the underlying CGI. I’m working with a proxy cgi that takes varying argument names (e.g. ‘method=getHostDetails&hostname=%s’) and forcing me to use ‘q’ means I have to go in and hack up my otherwise functionally-complete proxy CGI. :-(

    3) Lastly, it would be most excellent if there were a way to accept JSON output from the CGI being called…it seems a bit silly to force the client to parse the output of a CGI when that CGI could easily be written to output a JSON string and then simply do the following on the client:

    result = eval(‘(‘ + responseFromServer + ‘)’);

    -dan

  193. 25. October 2007 |13:25

    Very nice plugin, but has one bug: if i Work in “noConflict” mode, Yours plugin doesn’t respect this mode and work with $, so I have some problems with that.

  194. 26. October 2007 |08:28

    Now I see, that Bjorn Wijers told You that before, but You didn’t make corection. Pity…. At least I know how to corect this bug :)

  195. jonas
    27. October 2007 |15:29

    Hi Jörn,

    I’m working with your suggested workaround to re-initialise the ac-box:


    ("#textField").autocomplete("cities_a.php", {...});
    ("#textField").unbind().autocomplete("cities_b.php", {...});

    Everything works fine, except for the keyup / keydown events. It seems that these events are beeing called multiplied by the number of re-initialisations (first re-init causes a step by 2, next by 3, …).

    Thank you for in advance for any advice.

    Jonas

  196. Asle
    28. October 2007 |19:16

    I really dont understand how the backend php file should output data. I am searching for a company name and I want the result to populate information into a form. I.ex. I write “oslo” and I want to search for company place LIKE “oslo” and I want to get the values “company, addresse, zip, town” How should the “search.php” output this data?

  197. 28. October 2007 |19:59

    @Xavier: Thanks, that looks like a good idea. I’ll give it a try.

    @Dimi: Thanks for the report. That definitely looks like a bug, I’ll give your patch a try.

    @Ignatius: Take a look at the patch that Xavier posted. I’ll add that to the plugin soon.

    @Dan: That callback is already provided by the search-method. I’ll add support for changing the query-parameter-name.
    Accepting JSON definitely makes sense. The actual problem here is defining a good format. If it must be in a certain format, you’d had to change your proxy. Currently you only have to change the client side. Any suggestions for a good JSON format are welcome.

    @nospor: Thanks for the report. I’ll fix that.

    @jonas: Thanks for the report, too. I’ll have to check that. There should be an unautocomplete() method soon.

    @Asle: If you use the default format, you’ll just concatenate those values with a pipe (“|”) and seperate set with a newline.

  198. Dan
    29. October 2007 |00:54

    I’m not sure what you mean by that callback being provided by the search() method. The internal documentation states that this method may be invoked to mimic a search event, but in my case, I don’t want to “mimic” anything–I want to execute a method after the search has already been made through the normal means. As they say, a picture is worth a thousand words…perhaps you could point me at an example of how to do what I want with the method you’re describing?

    As far as the JSON goes, could I get you to e-mail me so we can conduct the conversation that way?

    -dan

  199. 29. October 2007 |05:18

    @Dan: Sorry, my mistake. I had the result-method in mind.
    Just drop me a mail about the JSON stuff.

  200. Dan
    29. October 2007 |06:24

    Ahhh…thanks for the link–that’s very helpful. I was going cross-eyed trying to read the raw javadoc!

    Speaking of which, how did you generate the javadoc pages for your javascript files? I took a look at jsDoc but couldn’t get it to produce anything useful from the javadoc’d source file I used.

    -dan

  201. 31. October 2007 |05:04

    Hi-
    I’ve extended JSOn support for your control and it seems to be doing well.
    Now I can do this:
    $(“#suggestJson”).autocomplete(“file:///C:/DevResources/jQuery/autocomplete/localjson.js”,{isJson:true});

    I couldn’t find an email for you but if you are interested in seeing it you can contact me.
    Thanks for your work on this plugin.

    Mike

  202. 1. November 2007 |19:40

    @Dan: See my little docTool. Though I can’t really recommend to use that anymore. I’ve started moving my docs to the jQuery wiki. It yet lacks a tool for exporting from the wiki back to the XML format, but Richard Worth is working on that.

  203. Todd
    8. November 2007 |01:38

    Beautiful! Thank you for sharing

  204. 8. November 2007 |12:06

    It’me again :)
    IE6 has some kind of bug, that when div is over select, then select is over div.
    So, Your plugin makes div and when below input are selects, then is a problem in IE6.
    You should check if there are selects under div You create, and if they are, You shold hide them. When div is hidden, You should show selects again.

  205. Todd
    8. November 2007 |18:41

    FYI I noticed that when using 1.2.1 instead of 1.1.2 some issues in your example arise with the hidden field not being shown correctly. I haven’t dug into the reason but I did notice the problem.

  206. 10. November 2007 |02:45

    I would like to use local data that doesn’t come from an array, but a javascript function that uses the data that the user has typed in. How do I do this? Do I put the local function in the localdata.js file or some other place? And how would I call it from the main definition. Please help.

    $(“#suggest1″).autocomplete(cities); // Is an array
    // how would I call a function?

  207. Alexander Shopov
    12. November 2007 |16:52

    Hi Jörn,

    This is really a great plugin. I have an issue with it though and hope that you might help:

    It seems to me that the behaviour of the autocomplete function is additive – i.e. if I set a text input to autocomplete several times it issues several requests to the server to get data instead of the last one.

    Simple example:

    $(“#country”).autocomplete(“countries.do”, {
    “mustMatch” : true
    });
    $(“#country”).result(function(event, data, formatted) {
    $(“#city”).val(“”);
    $(“#city”).autocomplete(“cities.do”, {
    “mustMatch” : true,
    “extraParams” : { “country_id”: data[1] }
    });
    });

    When the country field is chaged several times and id sequentially 4, 10, 50, on typing text m in the city field
    3 GET requests are issued to server:
    http://localhost:8080/cities.do?q=m&limit=10&country_id=4
    http://localhost:8080/cities.do?q=m&limit=10&country_id=10
    http://localhost:8080/cities.do?q=m&limit=10&country_id=50

    instead of only
    http://localhost:8080/cities.do?q=m&limit=10&country_id=50

    How can I fix this? I tried using intermediate setting with .autocomplete(), .autocomplete(false), .autocomplete([]) but this did not help.

    Can you give me any suggestions?

    Kind regards:
    al_shopov

  208. koorchik
    13. November 2007 |12:39

    I have the next problem.
    I want to autocomplete emails that look like -”Viktor Koorchik ” but it does not correctly

    Here is array which i use
    ["Viktor Koorchik ","TestName TestLastName "]

    When i type into input field “koor…” email disappears.
    Also it do not want to match names with spaces
    And one more problem “ds” string does not match “dsasdf asdfasdfasdfasd ” line in ["test test ","dsasdf asdfasdfasdfasd "] array

    My option are:
    matchContains: true,
    multiple: true,
    minChars: 0,
    max: 12,
    autoFill: false

    Is thete any possibility this to be fixed? Or may be i am doing something wrong?
    Thanks!

  209. 14. November 2007 |21:49

    @nospor: You can fix that by simply including the bgiframe plugin. Its linked above under Dependencies.

    @gorlewski: That isn’t supported, yet. I like the idea, though.

    @Alexander: You can overwrite the extraParams-options using setOptions instead of binding all the stuff again.

    @koorchik: I assume you use something like “Name <email&gt” (which the comment system likes to garble, too). That issue should be fixed in the latest revision, please give it a try.
    I’m not sure yet about the other issue, I’ll take a look at that.

  210. Cam
    15. November 2007 |02:53

    Has anyone encountered different results hitting enter vs clicking on a search result?

    code:
    // take selected input from autocomplete search
    $(“#txtEditors”).result(function(event, data, formatted) {
    // add an option in a select input with the returned values
    $(“#selEditors”).prepend(” + formatted + ”);
    // remove the resulting “selected” status of the newly added option
    $(“#selEditors option”).removeAttr(“selected”);
    // clear the returned value from the text input search box
    $(“#txtEditors”).val(“”);
    // focus on the text input for another search
    $(“#txtEditors”).focus();

    problem:
    If I select a return from the dropdown list using the Enter key:
    in IE: .val(“”) and the .focus() fails.
    in FF: .focus fails

    No problems if I select with the mouse.

    Also, has anyone had issues with extra remote ajaxed results inserting themselves at the top of the results a second after the dropdown list appears? This especially happens if I type past the min characters number to trigger a search. If I type up to the min chars and wait for the results to display before I continue typing, it doesn’t happen.

    I’m hoping this is a configuration issue. My current config is:
    $(“.ajaxldap”).autocomplete(
    “#myself##xfa.getEmployeeInfoFromName#”,
    {
    delay:10,
    minChars:2,
    matchSubset:1,
    matchContains:1,
    cacheLength:10,
    //onItemSelect:appendOptionLast,
    //onFindValue:findValue,
    formatItem:formatItem,
    autoFill:true,
    extraParams: {foo: “bar”}
    }
    );

    Cam

  211. 15. November 2007 |08:27

    Hi there,

    Has anyone tried using the combination of multiple: true, and multipleSeparator: “\n” (or “\r”), it seems to produce some VERY interesting results, not sure what the solution is for this.

    I was hoping to use your script to allow Drupal developers to code their modules more easily by allowing them to type in the first few characters of a Drupal PHP function, and after the autocomplete comes up with the rest of the function name, using that function name to populate a textarea with a pre-formatted function definition (including the arguments of the function).

    This would require me to allow a \r or \r\n or \n as my separator in the textarea. Unfortunately when one does this, and allows for multiple results (so that I can have multiple functions included in my module) the previous results are messed up. Basically it looks like the script does a split of the previous results, but ends up splitting the results into individual characters.

    Try it out, you’ll see what I mean. Maybe I am doing something wrong.

    // just some samples
    var functions = new Array();

    // hook_user().
    functions['hook_user'] = new Array();
    functions['hook_user']['params'] = '($op, &$edit, &$account, $category = NULL)';

    // hook_nodeapi().
    functions['hook_nodeapi'] = new Array();
    functions['hook_nodeapi']['params'] = '(&$node, $op, $a3 = NULL, $a4 = NULL)';

    // hook_xmlrpc().
    functions['hook_xmlrpc'] = new Array();
    functions['hook_xmlrpc']['params'] = '()';

    // taxonomy_get_term().
    functions['taxonomy_get_term'] = new Array();
    functions['taxonomy_get_term']['params'] = '($tid)';

    $(document).ready(function () {
    $("#body-text").autocomplete(["hook_user", "hook_nodeapi", "hook_xmlrpc", "taxonomy_get_term"], {formatResult: prependFunction, multiple: true, multipleSeparator: "\r"});
    });

    function prependFunction(data, position, total) {
    return "function " + data + functions[data]['params'] + '{' + '\n' + '\n' + '}';
    }

    Dave

  212. 15. November 2007 |11:18

    @Jörn hmmm, for some reason bgiframe doesn’t work… :( Probably i make some stupid mistake, but I can’t see it.
    Ok thanks for info. I will check it again.

  213. 15. November 2007 |20:33

    @Cam: Can you provide a test page for that issue?

    @David: Here, too, a testpage may help. Though the multiple-feature is rather broken anyway, I’m not sure that is fixable anytime soon.

    Btw., you really should use object literals. Something like this:

    var functions = {
      hook_user: {
        params: "..."
      },
      hook_nodeapi: {
        params: "..."
      },
      ...
    };
    

    @nospor: There was an update in bgiframe because some change in jQuery 1.1.3 or 1.1.4 broke it. Make sure you’ve got the latest revision if you are working with jQuery 1.1.x+.

  214. Alexander Shopov
    16. November 2007 |16:58

    Hi Jörn,
    Thank you very much for your help on 14. November 2007 at 21:49. It was my mistake that I was using the alpha version, not the one in svn. When I upgraded and used your wonderful documentation – everything just went smoothly as your tip suggested.
    Thank you one more time.
    Kind regards:
    al_shopov

  215. Jonathan
    17. November 2007 |22:45

    I’m having a similar problem to the one mentioned by jonas on 27 October. I noticed that Jörn said that he’d be coming out with an “unautocomplete()” method in the next release. Is there a workaround until the next release comes out?

  216. chandaa_maama
    20. November 2007 |01:59

    does anyone have a tutorial on how to fetch the data from the database to work with this plugin.
    For eg In MySql table called Address, it has a field Location,
    how will i use jquery to fetch this data via ajax and send it to this plugin

  217. 20. November 2007 |05:11

    hi,
    Is it possible to abort autocompletion ajax request if another request is send?

    regards.

  218. Asle
    23. November 2007 |23:26

    Is it possible to be able to navigate the dropdown with arrow keys and click ENTER to submit? Just like the one at brandspankingnew.net ?
    http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html

  219. Asle
    23. November 2007 |23:41

    I also worked hard to understand how to get to the data response. Here is how I found to handle data from a php page. The php page receives $_REQUEST['q'] and does a search (remember it is UTF_8 so to return it you muse decode it also if like I use Norwegian). Format your result like this:
    Ole Olsen|Storgaten 3|0105|Oslo\n
    Jens Jensen|Nordre gate 1|1400|Ski\n

    To get the data I wanted to populate the fields “name”,”addresse”,”postcode” and “City”. So after the autocomplete code $(“#finnK”).autocomplete(“code/finnForhandler.php”, { etc…..
    The result is an array “data[]”
    This code populates from the AC input “#finnK” into the inputs with the given IDs:

    $(“#finnF”).result(function(event, data, formatted) {
    $(“input#name”).val(data[1]);
    $(“input#addresse”).val(data[2]);
    $(“input#postcode”).val(data[3]);
    $(“input#city”).val(data[4]);
    });

    I will try to make a demo page but cannot promise. Seems no one else but me ever had this “simple” question ;-)

  220. Asle
    23. November 2007 |23:45

    Btw. I put this code inside the:
    $(document).ready(function() {
    …the code here after the last function before the end });
    You never can be too clear.

  221. 27. November 2007 |14:08

    @Jonathan: Its already available in the latest revision. Though currently it removes all events on the input, which should be fine in most cases. I’ll improve it to remove only its own events.

    @chandaa_maama: I’m sure you are using a serverside language like PHP. You should look for resources on that language for implementing serverside stuff. You can download the release and take a look a search.php for an example creating the output based on an array. There are thousands of tutorials on getting an array of data out of a database in PHP.

    @jean-sébastien: Yep. And its easy: Using the latest revision, add the ajaxQueue plugin to your page. Done.

    @Asle: If you set minChars to 0, you can keydown to open the accordion. When selecting a value the field is blurred to avoid a form submit, because in 99% of cases that is not what the user expects.

    Thanks for the mini tutorial. I’d like to take that and put it on the documentation in the jQuery wiki (coming soon).

  222. koorchik
    28. November 2007 |16:20

    Hi. I’ve found a bug in latest revision (1.0 Beta)
    When I am trying to autocomplete email from array
    ["Marina Chevelcha <chevelcha@bigmir.net>","test100 test100 <test100>"]
    When i type ‘m’ into input field i have got correct variant
    “Marina Chevelcha ”
    but after that when i delete ‘m’ – autocomplition suggests me to variants:
    Marina Chevelcha ;
    test100 test100 ;

    But there should not be semicolons;
    Thanks in advance in hope for help :)

  223. Asle
    28. November 2007 |17:38

    Hello,
    Works fine in Firefox, Opera and Safari (but the dropdown is shown down and 10px right) but in Internet Explorer I can not see the dropdown. Any where to start looking for something that could cause this in my code? The test page seems fine in IE6.
    /asle

  224. Stefanie
    29. November 2007 |11:37

    Hi,
    Autocomplete works very fine. But when using Autocomplete in a ThickBox, the result in ac_results is not visible. The CSS z-index property needs a value of minimum 1000, then ac_results is visible in the ThickBox.

    Stefanie

  225. 29. November 2007 |14:21

    Hi Jörn,

    First of all, thanks for your great work! With your your plugin implementing an autocomplete is really a breeze.

    When trying to optimize the load put on the backend server (only in the remote data scenario), I started wondering about two possible optimizations in the way data is cached:

    1) Limiting backend requests for queries returning no results

    Currently, when for some input the backend returns no rows, and then the same input appears in the text box again (e.g. by adding one more character, and then pressing backspace), another request is made.

    I was wondering if it would make sense to implement an option that enables caching also for those queries (inputs) that did not return any results. This way, multiple requests could be reduced. Obviously, there is a problem of stale cache (new entries appearing on the backend between queries), but this is no different from the situation we have without this option.

    2) Limiting backend requests for “superstrings” of queries returning no results

    As an extension of 1). Essentially, in the most common scenario, the backend returns entries that contain the query as a substring (or e.g. start with the query). We could further reduce the number of backend requests in this scenario by assuming that if for string “abc” there were no results return, there would be no results for a “superstring” of “abc”, e.g. “abcd” or “dabc”.

    As far as I can understand, if option 1) is implemented, we 2) would be achieved by setting the matchSubset option to true?

    Once again thanks for the great jQuery plugin!

    Staszek

  226. koorchik
    29. November 2007 |14:53

    I’ve solved problem by changing minChars from 0 to 1.

  227. 29. November 2007 |15:04

    Hi Jörn,

    One more thing, a bug report for the latest version (3917) actually.

    When I start typing in an autocomplete field (say, I typed two letters: “st”), the backend returns a number of results, first of which is e.g. “storage@test.com”. The first entry gets highlighted (receives CLASSES.ACTIVE), but I keep typing (say now I have “stanislaw” in the input) and the list of suggestions disappears because there were no matches from the backend for the longer string. But, when I press enter, the string I’ve typed (“stanislaw”) gets replaced by the (not-matching) “storage@test.com” (suggestion that got highlighted when I stopped after typing “st”). This happens with the mustMatch option set to false.

    The problem does not apply to the official alpha, just the latest version. I quickly looked at the two versions — in the latest one, the class CLASSES.ACTIVE gets only added to elements (no call to removeClass(CLASSES.ACTIVE)), while in the (working) alpha version the CLASSES.ACTIVE class gets both added and removed from elements. Maybe this might be a hint for fixing the problem.

    Cheers,

    Staszek

  228. Jon
    29. November 2007 |18:07

    Hi Jörn,

    Is there a simple way of having an autocomplete box fill out more than TWO input fields? Your bird example fills out the input below it, but what about filling TWO inputs below it, with separate data?

    I thought changing the array in search.php to something like ->

    “Great Bittern”=>array(“Botaurus stellaris”,”Location”),

    And then somehow changing the JS and PHP file to do this so filling out “Great Bittern” also fills out “Botaurus stellaris” and “Location” in separate boxes.

    I just can’t figure this out easily…. any help?

    Thank you.

  229. Jon
    29. November 2007 |18:55

    I figured it out in case anyone was wondering. I had to add $list($value1, $value2) = $values inside the IF statement in search.php, and then just create another dollar function in the JS to fill the 2nd input with val[2] instead of val[1]

  230. Jon
    29. November 2007 |18:57

    ^^ Sorry, scratch that first $ in the PHP line, obviously.. I was getting ahead of myself. :)

    I of course also forget to mention that it would have to be changed to “echo “$key|$value1|$value2\n”;” as well.

  231. beerfan
    29. November 2007 |22:38

    Any chance you’re going to update this for jQuery 1.1.4 soon? WordPress MU 1.3 (and WordPress 2.3 I believe) is shipping with that version and the plugin doesn’t work with it. Running multiple versions of jQuery in the same page isn’t really an option either.

  232. Juan
    29. November 2007 |23:18

    Hi! Nice plugin, excellent work, It has helped me a lot! Thanks!
    A question, how can I make it work with AjaxPro with support for jQuery, I’ve been trying in different ways and I can’t do it, I just get a mehod that receive the data but I don’t know how to link this

    //Main input: It’s job it’s to bring data from server in each type from user
    jQuery(“#schoolCode”).keyup(function(){ ClassCSW.GetAutoSchoolCodes(jQuery(“#schoolCode”).val(),0,onGetAutoSchoolCodes);
    });

    //Here I config autocomplete
    jQuery(“#schoolCode”).autocomplete(jsonSchoolsData, {
    max: 20,
    width: 575,
    selectFirst: false,
    formatItem: formatItem,
    formatResult: formatResult
    });
    autoCompleteResult(0);

    //global var for storing remote data in JSON format (I hope)
    var jsonSchoolsData = [];

    //function called after AjaxPro worked (brings remote data in JSON format)
    function onGetAutoSchoolCodes(xhr){
    jsonSchoolsData = eval(‘(‘ + xhr + ‘)’);
    }

    //Returned data from server
    outScript += “[";
    foreach (DataRow rowData in dt.Rows){
    outScript += string.Format("{7} viewData:'{0}-{1}-{2}', mainData:'{0}${1}${2}${3}${4}${5}${6}' {8},", rowData["SchoolCode"], rowData["SchoolName"], rowData["SchoolAddress"], rowData["SchoolDistrict"], rowData["SchoolCity"], rowData["SchoolState"], rowData["SchoolPrincipal"], brackets[0],brackets[1]);
    }
    outScript = outScript.Substring(0, outScript.Length – 1);
    outScript += “]”;

  233. beerfan
    29. November 2007 |23:45

    Disregard my previous comment. The problem with using the plugin in WordPress is that it loads both jQuery and prototype. By changing the only instance of $() in the plugin, on line 157, to jQuery() I was able to work around the problem along with the tips found here.

    http://docs.jquery.com/Using_jQuery_with_Other_Libraries

  234. mmesh
    4. December 2007 |14:39

    Hi!

    I’m trying this jQuery plugin but as I’m new to javascript, jQuery and plugins stuff I have a problem…
    I can not load autocompleter inside thickbox or simplemodal plugin and get it working correctly.
    I can’t find what is wrong with the code.
    Can someone look at this code snippets and , please, help:

    <script type="text/javascript">
    $(document).ready(function () {
    $('#s1').autocomplete("searchBackend.php", {
    width: 250,
    selectFirst: false,
    extraParams: {"item": "nazorgJ"},
    domElement: '#nazorgModalContent',
    minChars: 3
    });
    });
    </script>
    ...
    <a href="#TB_inline?height=155&width=300&inlineId=nazorgModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
    ...
    <div id="nazorgModalContent" style="display: none">
    <label for="s1">Tražite i odaberite nazorg:</label>
    <br />
    <input type="text" id="s1" style="width: 250px" />
    </div>

    ---

    Actually code gets executed but dropdown list appears beneath modal box so it is partly or not visible at all.

  235. Harry
    6. December 2007 |09:48

    Hi,
    Looks like selectFirst:false is broken. Using the demoPage (single bird) IE and FF producing script errors.

  236. Alexander Shopov
    6. December 2007 |15:33

    Hi Jörn,

    There is a small bug in the autocomplete library – current svn version.

    I have filed a bug report and trivial patch here:

    http://dev.jquery.com/ticket/2018

    Kind regards;

    al_shopov

  237. Matteo
    6. December 2007 |19:19

    Hello Jörn,
    your plugin looks great. I’m experiencing some problems with “mustMatch”, specifically.. looks like it doesn’t work at all :P! I reviewed your previous comments but event after getting the latest revision I keep getting this behaviour: when I type a custom string and hit tab, it replaces my custom string with the nearest string in the list.

    Do you plan to fix (or is there any workaround for this) this?

    Thanks again and my compliments again for your plugins.

    mt

  238. Harry
    10. December 2007 |11:23

    Hi Jörn,
    There seems to a strange tab-navigation problem in IE7. Navigation through input fields using TAB key, is not possible when autocomplete fields shows a result list. Following fields can not be reaches any more. Seachring through source, reveals that tab and enter key are treated the same.
    Adding a

    case KEY.TAB:
    selectCurrent();
    break;

    solved the problem for me.
    Greetings
    Harry

  239. Travis Phipps
    10. December 2007 |17:37

    I think I’ve stumbled on an issue with the cacheLength parameter. If I set this parameter to 1, I still get cached results returned from my autocompleter. However, if I manually call the flushCache method before trying my second search, I don’t get the cached entries in the result set. Can anybody else confirm this?

  240. 11. December 2007 |05:15

    The example breaks by simply renaming the file to index.xhtml and replacing the top html tag with:

    <code>

    </code>

    Hmm… xhtml is not supported for some reason?

  241. 11. December 2007 |05:16

    Sorry the code didn’t show up for the previous post… it was just the standard xhtml header (transitional).

  242. Peter Herndon
    11. December 2007 |20:27

    Hi Jörn,

    I’m having an issue with IE6, where the border on the results list disappears as the results drop down over a select box. And I am loading the latest bgiframe before autocomplete.

    Also, the experimental scroll feature is evidently defaulting to on, as I found when I updated to the latest version. :)

    Thanks for a great plug-in!

  243. 11. December 2007 |22:28

    @Asle: Testpage?

    @Stefanie: In addition that your suggestions, the latest revision allows you to define the attachTo option, which defaults to “body”.

    @Stanislaw: Thanks for your suggestions and bug reports. I’ll try to implement your suggestion, that definitely makes sense. Preventing a query when a superstring returned no result should be rather obvious to implement, no requering a previous result needs some work on the cache.
    I think the bug you report is now fixed in the latest revision. I had to remove the active class again…

    @Jon: I’ll try to add more examples or improve the documentation on how to deal with the response in other ways then those already illustrated.

    @beerfan: Straying uses of the $ alias won’t be a problem anymore, fixed in latest revision.

    @Juan: Testpage?

    @mmesh: The latest revision provides the attachTo option. The demo page shows the usage together with Thickbox.

    @Harry: I think that got fixed, I’m pretty sure the issue was the same or related. Could you give it another try?

    Good suggestion on the tab issue. I haven’t added that yet because I’m still not sure if Tab should actually select the current value, or just cancel and tab to the next field.

    @Alexander: Thanks, fixed!

    @Matteo: What mustMatch lacks most is a definition of how it is actually supposed to work. The Ext combobox is a good reference implementation. If you could describe what you actually need (or expect) for that option – that could help a lot.

    @Travis: I’ll take a closer look at that issue.

    @Zachary: Basically there is no reason why that should change anything. I’ll have to try it myself – a testpage would be useful.

    @Peter: Yeah, thats an ugly sideeffect of the bgiframe plugin. I’ll have to contact Brandon, the author, to check if there is anything we can do about that.
    The scroll feature isn’t considered experimental any more and (mostly) replaced the moreItems-option.

  244. Harry
    12. December 2007 |10:55

    Hi Jörn,
    Thänks for the update. Problem with selectFirst:false & leaving the field with tab-key is fixed with the latest revision.

  245. 16. December 2007 |02:08

    Hi jörn,

    i got a problem with formatItem function (looks like a bug): it returns content of my tags ie if i format with and type ‘em’ in input text every items will be shown.

    Another question: is it possible to format result as categories, i would like to do something similar to apple site autocompleter.

    tschüß.

  246. 17. December 2007 |01:34

    Hello Jorn,

    It looks the problem with .xhtml is more of a JavaScript issue rather than an issue with your auto-complete source.


    uncaught exception: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)" location: "/path/to/jquery-1.2.1.js Line: 813"]

    I was able to solve my problem by simply modifying the contentType from “application/xhtml+xml” to “text/html”.

    Apparently, this article (dealing with XHTML, JavaScript, and MIME Types) from 2003 is still relevant.
    http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

    By the way, thanks for your time spent developing the plug-in!

    -Zach

  247. dan
    17. December 2007 |02:42

    Is it possible that the plug does not work inside html tables?

    my tests seem to show this.


    <table><tr><td>
    <input type="text" id="autocom" />
    <script>
    $("#autocom").autocomplete("searchposts.php",
    {multiple: true,
    extraParams: {uid:'5354',num:'5',start:'0'},
    cacheLength:1});
    </script>
    </td></tr></table>

    this bit of code works if i remove the surrounding table tag, but not within it as shown… any ideas why this might be, and workaround options?

  248. dan
    17. December 2007 |02:52

    when i say does not work … i should clarify – no errors – just no display of results…using exact same characters in tb.

  249. dan
    17. December 2007 |02:57

    ok i realize now …the only the script seems it cannot be in the table …not the input tag. i have had no probs with other jquery scripts residing inside of a table… so i’d be curious for any illumination. perhaps it’s a bad idea in general to include scripts in table cells… tho it hasn’t caused a prob yet till this.

  250. dan
    17. December 2007 |03:35

    so on to another more complex question:

    i now have cool functionality working where I am returning results as clickable thumbnails in the dropdown. this is nice, but i am wondering if i could have the results display in my own div on the page instead of the dropdown below. it seems that the .result might be designed for this but i am having trouble figuring out how to work that. if anyone has an example or can guide me in this that would be great.

    thanks for excellent plugin.

  251. 17. December 2007 |16:31

    If anyone’s looking of a way to limit the number for a multiple input, here’s what I did:

    on line 328 change:


    if ( words.length > 1) {

    to


    if ( words.length > 1 && words.length < 5) {

  252. dom
    18. December 2007 |16:27

    Hello Jörn,

    thanks for your great work.

    @Stanislaw & Jörn: You can fix the selection/overwrite issue with one more removeClass in hide.

    I patched it into:
    ========================================
    hide: function() {
    element && element.hide();
    listItems.filter(“.” + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE);
    active = -1;
    },
    ========================================

    And now you’re able to type words that are not in the list, without loosing them on tab or return. I’ve tested it with your demos and everything works fine.

    Thanks again and my best regards
    dom

  253. dom
    19. December 2007 |12:35

    Sorry Jörn,

    the patch should be
    ========================================

    hide: function() {
    element && element.hide();
    listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE);
    active = -1;
    },

    ========================================

    to prevent JavaScript errors

    Best regards
    dom

  254. 21. December 2007 |00:31

    @Harry: Thanks for reporting back, good to know its really fixed.

    @Jean: I’m not sure about your formatItem problem, I’d need a better example. Try to escape the embedded html.

    Adding categories is an interesting idea, but currently not exactly easy. I’d have to look into that.

    @Zachary: Nowadays you’ll most likely find just as many people telling you to use an xml mime-type as people telling you not to. I tend to not using it, because after all I’m writing text/html at no xml. Having a strict xml parser/intepreter on the serverside is good for security, but not exactly helpful on the client-side.

    @dan: Why not just putting the script into the head, surrounded by a document.ready block?

    About your more complex question: Could you provide some more information?

    @perry: Thanks for mentioning, may be worth adding to the plugin as an option – though currently I’d rather move the multiple sutff into its own plugin which leverages the core autocomplete.

    @dom: Did that issue occur also with the fix in selected (see latest revision)?

    selected: function() {
    	var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE);
    	return selected && selected.length && $.data(selected[0], "ac_data");
    },

    Please check that – I don’t really want to add another removeClass if it isn’t necessary, the code is already weird enough.

  255. 22. December 2007 |08:00

    hallo jörn, it is wasn’t a bug but a misunderstanding from me. the problem is i’d like to separate autocomplete filtering from display. the problem with formatItem is that if i search for “im” it should return just the string elements with it (ie “imagine”) but it search in the formatting too so all elements with “” are returned… maybe i missed something. regards.

  256. 23. December 2007 |07:58

    this patch should get the mustMatch==false option working:

    Index: jquery.autocomplete.js
    ===================================================================
    — jquery.autocomplete.js (revision 20916)
    +++ jquery.autocomplete.js (working copy)
    @@ -245,6 +245,9 @@

    // matches also semicolon
    case options.multiple && $.trim(options.multipleSeparator) == “,” && KEY.COMMA:
    + if (!options.mustMatch){
    + break;
    + }
    case KEY.TAB:
    case KEY.RETURN:
    if( selectCurrent() ){

  257. Nitin
    5. January 2008 |02:49

    Hi

    Plugin works great in Firefox , Netscape in IE7 there is strange problem when i use plugin on simple form it work . but when form is contained in the FRAME then list is not displayed or remote procedure is called.

    Any ideas how to fix this.

    Sample page bellow work great when not in frame

  258. al_shopov
    9. January 2008 |16:44

    Hi Jörn,
    I have filed a very trivial to fix bug in http://dev.jquery.com/ticket/2138

    It is about spelling errors in the documentation.

    Kind regards:
    al_shopov

  259. 10. January 2008 |02:43

    Hi jörn – Awesome work mate, this autocomplete is exactly what i’v been looking for!

    Please could you give me a pointer… I can’t figure out how to pass the id from my json array to a hidden input field.

    the json array is here:
    http://interactiveresorts.co.uk/testing/admin/i/js/jquery.autocomplete/localdata.js

    my test is here: http://interactiveresorts.co.uk/testing/admin/flatfiles/autocomplete.html

    Your example shows how to pass a key using the remote php file.

    Can you give me a pointer on how to do this with a json array with name and id?

    Many thanks
    Matt

  260. graeme d
    11. January 2008 |15:00

    How can I pass a value to the backend that could change? I’ve tried:

    extraParams: {
    qtype: $("#qtype").val()
    },

    but this only sends the value of qtype when the page was loaded, not what the value currently is.

    any ideas?

  261. Mark Thompson
    11. January 2008 |19:48

    Hi,

    I was wondering if someone could steer me to some help regarding the jquery.autocomplete.js I found at pengoworks.com. I assume that it is not quite the same as the version here and would be willing to change to this version if I can get some help getting it to work. I am fairly new to JavaScript and really new to jQuery and the autocomplete addition. I am trying to update my code to use a single input field with the autocomplete functionality instead of the input field and select dropdown I had previously implemented. I have multiple, analogous city fields as part of multiple addresses. I have gotten the code to properly display the dropdowns and select the values for each of the city inputs. The “this” keyword was so helpful here. My problem is that the autocomplete code does not trigger the JavaScript onchange code in each input field that worked so well in the previous version. I am not sure how to do that without a reference to the particular input element that has changed, and I have not been able so far to wade through the autocomplete code to find how it is referenced there.

    Here is a bit of the current relevant code:

    <input class="text" id="city<%=addID%>" type="text"
    name="city<%=addID%>" size="30" maxlength="120" value="<c:out value="$
    {partyAddress.city}"/>" onchange="javascript: updatePartyAddress(this,
    <%=addID%>);" >
    ...
    var idList = "<%=addIDStringBuffer.toString()%>";
    var idArray = idList.split(",");

    $(document).ready(function() {
    for(var i=0; i< idArray.length; i++) {
    $("#city"+idArray[i]).autocompleteArray(
    [
    <%=cityList.toString()%>
    ],
    {
    delay:10,
    minChars:1,
    matchSubset:1,
    onItemSelect:selectItem,
    autoFill:true,
    maxItemsToShow:10
    }
    );
    }

    });

    Perhaps something to do with selectItem is needed?
    Any help would be appreciated. Thanks.

    Mark Thompson

  262. al_shopov
    15. January 2008 |18:53

    @graeme d: you need to evaluate and set qtype to be $(“#qtype”).val() just before sending the request.

    What you are currently doing is that you have constructed an object with one property with some already computed value. The object, its properties and values is constant. If you want that value to change – you need to construct/change the object dynamically – on every change of $(“#qtype”).val()

  263. Feed
    15. January 2008 |19:15

    Hello Jörn, thanks for making this plugin even better. I have a request, though. Sometimes a results box “aligned to right” may be needed if the box has a custom width… take a look at this example image I did and you’ll understand.

    http://www.mz-ir.com/temp/autocomplete_align_right.gif

    What do you think?

  264. Mark Thompson
    15. January 2008 |19:45

    Thanks for the interest, but I am at a loss to understand what request and what object, properties and values you are referring to in your response. That is probably because I have so little experience with JavaScript let alone the autocomplete and jQuery plugins. It may also have to do with the fact that the code I am using was found at pengoworks.com and may be substantially different from the code found here.

    I will try to use the version of the code found here and see what happens.

  265. Mark Thompson
    15. January 2008 |23:22

    Ok. I changed my code to use the latest linked code (Thanks, Jörn!) and got it to run the same as the code at pengoworks.com (except for the code that onSelectItem pointed to), but I do not know where to proceed from here to run the onchange code that each input or select box formerly ran when its value had been changed and it no longer had focus. That is, I would like (and, frankly, need) help in getting this to act like a regular select box.

    As I am very much a newbie to JavaScript and its plugins, any simple, or more complex but step-by-step, help would be greatly appreciated.

    Mark Thompson

  266. 17. January 2008 |01:15

    Hi Jörn!

    I took your script and enabled it for work with application/xhtml+xml .


    Find $('<div>') change it to $('<div/>')
    Same with $('<ul>') and $('<li>')

    After an hour or two thinking that I shall change content-type of AJAX PHP finally got the point and fixed JS code!

    Cheers,
    Piotr Gabryjeluk

  267. Mark Thompson
    22. January 2008 |19:57

    Hi all,

    I have changed a little of my code and have gotten the onchange code to run, and it runs well in Firefox, but Internet Explorer does not hide the dropdown list after selecting a value unless it is selected a second time. What can I do to change this behavior?

    var idList = “”;
    var idArray = idList.split(“,”);

    $(document).ready(function() {
    for(var i=0; i
    ],
    {
    delay: 100,
    selectFirst: false
    max: 10,
    scrollHeight: 500
    }
    );
    }
    });

    Could someone please advise?

  268. mike
    24. January 2008 |18:27

    Hi, I want to implement this plug in however I’m still confused as to what the PHP needs to look like.

    I want to get last name, first name from a mysql db. I’m not going to use a local array. Can you please post an example of what the the PHP needs to look like?

    IE: in your example listed above, I want to see exactly what my_autocomplete_backend.php would look like.

    Thank you,

    -Mike

  269. al_shopov
    28. January 2008 |16:13

    Hi Jörn,

    I am not able to find a way of doing the following:

    1. There are times when the user enters some information in the input.
    2. When the input uses autocomplete with
    “mustMatch” : true – if user input is not a legal choice it gets deleted
    3. However no event is raised and I am unable to hook on the delete by the autocomplete functionality.

    4. The solution is to implement something like a behavior – a functionality that constantly loops and checks whether the input is empty which is very suboptimal.

    Do you prefer this to be entered as an issue in the Trac?

    Kin regards:
    al_shopov

  270. Fabien Meghazi
    28. January 2008 |18:10

    I lost an hour to figure out a very strange problem, I write it here hoping it can save people to get mad if they encounter the same problem:

    In some circumstances, focussing the field before applying autocomplete() on it can lead to strange behaviour : eg: autocomplete working sometimes and sometimes not.

  271. mike
    28. January 2008 |18:35

    I solved my last issue (posted on Jan 24)

    I have another quick question though.

    Is there a switch so that I can turn off the scroll bars in my drop down?

    Thanks,
    -Mike

  272. mike
    28. January 2008 |18:38

    Never mind, I just found the scroll option.
    sorry about that.
    -Mike

  273. Matthew Baker
    28. January 2008 |20:27

    I attempting to use this autocomplete tool to lookup URLs.

    So if I type:
    1979-sy (and then wait)

    I get this in the suggest box:
    1979-synth-1.htm
    1979-synth-2.htm
    1979-synth-3.htm

    If I then add one more letter:
    1979-syn (and then wait)

    I only get 1 response back to the suggest box:
    1979-synth-1.htm

    If I hit backspace:
    1979-sy (an then wait)

    I get this in the suggest box:
    1979-synth-1.htm
    1979-synth-2.htm
    1979-synth-3.htm

    This seemingly broken behavior goes away if I set cacheLength to 0. Setting cacheLength to 0 is prohibited in the documentation.

    I am at a loss.. Any ideas?

    thanks,

    matt

  274. Matthew Baker
    28. January 2008 |20:58

    Never mind…

    Actually, the problem was when I typed “syn” and waited, I would get:
    synth-1.htm
    classic-synths/synth-2.htm
    classic-synths/synth-3.htm

    Then when I would add a “t” (now we have “synt”) it would come back with only:
    synth-1.htm

    I couldn’t figure out what happened to the rest of the suggestions.

    I solved the problem with “matchContaines: true”, a parameter I had mis-understood earlier..

    Sorry…

  275. Xinhao
    30. January 2008 |03:23

    i have try this plugin.It’s very good.But i have meet a problem.
    That is i want to use chinese character.OK.You know for a chinese character we need more than one key.So when to fire up the auto complete event.

  276. jamieorc
    30. January 2008 |18:19

    I’m trying to use json data per your example. When the json data is local, it works fine, but if I do a remote call (just a get), the returned string isn’t being interpreted as json data. Not sure what I’m doing wrong. Also, what I’d really like to do is use $.getJSON to do a post somehow. (My data sets are very large, so I can’t preload the json data as in your example.)

    Thanks,

    Jamie

  277. Jim
    30. January 2008 |20:11

    Jorn – Any updates on the TAB issue?

    It is still acting odd in IE7 for me – even on your demo page…

    If I enter a city “New Albany” and select the item either by hitting tab or clicking it with the mouse – the next tab takes me back to the top of the page.

  278. Mark Thompson
    30. January 2008 |21:08

    I have gotten my code (see above) to work under most circumstances. I would like to be able to use selectFirst; however, I cannot because if it is set to true tabbing out of the field after entering some text but without actually selecting an item results in the onchange code not running. Is there a way around this “problem”?

  279. jamieorc
    31. January 2008 |01:01

    Another question. When the item is selected, I want to set focus on the input element. I’ve tried a few things, but nothing is working. How to do this?

    Thanks,

    Jamie

  280. Gideon
    1. February 2008 |23:00

    There seems to be an issue with a multipleSeparator of ” ” (space only). I modified line 366 from:

    var words = value.split( $.trim( options.multipleSeparator ) );

    To:

    var words = value.split( options.multipleSeparator );

    Simply removed the trim.

  281. Markus
    4. February 2008 |18:05

    Hi, cool plugin! One question: How do I change the request url from ?q=foo%2C%20bar&limit=10 to /foo/bar/10 or something like that?

  282. 8. February 2008 |09:52

    I had a problem with Russian characters. The solution is to escape the request string, like this:
    data: $.extend({
    q: escape(lastWord(term)),
    limit: options.max
    }, extraParams),

    After that everything is OK, both in Russian & Latin encodings.

    Thank you for component, good luck!

  283. Lucas!
    13. February 2008 |12:49

    Hi.

    Nice WORK!

    But Can I change in this script someting…

    Now Value is CHANGE all, but i must have + to value exist in input

    … sorry for me English, he is very bad ;)

    Thank you.

  284. 20. February 2008 |16:02

    Hello.

    One bugfix coming up:

    Line 704: listItems.slice(active, active + 1).removeClass();

    should be: listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);

    Or else when browsing inside results box with arrow keys odd/even highlight is going away.

  285. Roman
    27. February 2008 |00:23

    Hi All,

    This is working great for the most part.

    My only issue is, if I hit enter to select one of the values from the drop-down that comes up, it submits my form.

    Is there any way to make the enter key just fill in the textbox and not submit the form until all the other things are completed?

    -Roman

  286. 27. February 2008 |18:15

    Just curious if anyone has used Selenium to successfully test the autocomplete field? I am having no luck getting Selenium to work.

  287. Roman
    27. February 2008 |20:16

    Hi All,

    Nevermind my last post, I figured out the problem,

    BUT, the new issue is the tab index. For some reason after the value is selected hitting the Tab key goes to the Submit button. I’ve tried adding the tabindex to every form element, but this seems to be ignoring that as well. Is there any way to make it actually go to the next form element?

    Thanks,
    -Roman

  288. Arian
    28. February 2008 |19:19

    Just wondering, my server script returns data in this form
    client name|client number|client ID…
    Joe’s Store|101|6000
    Mary’s Bar|102|6001
    Best Retail Co.|103|6002

    I use formatItem to present the client name/client number data to the user like so in the list:

    function(data, i, total)
    {
    return data[0] + "(#"+ data[1] + ")" ;
    }

    i use formatResult so the value shown to user in the text box is just the client name

    formatResult: function(data, i, total)
    {
    return 'Picked: '+data[0];
    }

    but I also would like to set the client ID in a hidden field after they choose a value. I thought setting it before the return value in formatResult would work BUT that seems to be called for each item, even though user just clicks once on an item (I would have assumed it would just be run once for the item clicked).
    Where would i put something like $(‘#clientID’).attr(‘value’, data[2]);? Any handlers I should attach that code to?

  289. Arian
    28. February 2008 |21:54

    whoops nvm,
    Just add a new method .result :)

  290. Craig
    4. March 2008 |00:06

    I’m at a bit of a beginners loss here. I’d like to know what to add/change in search.php so I can interface with my mysql database. I don’t want to store 30000+ records in a single file.

    Any help would be greatly appreciated. I know its a very general question but I am sure I would not be the first to tread this path .

  291. Wojtek
    4. March 2008 |16:03

    It doesn’t work in my site. When I run testrunner I get error: Died on test #1: TypeError: jQuery.Autocompleter has no properties.

    Could You help me please :)

  292. 5. March 2008 |08:45

    thanks for the great work you are doing!
    as a german speaking: have you ever tried the autocomplete plugin with results that have german umlaut ? did you try to search in remote data which have german umlaut? I could not find a plugin which is working under that conditions. Dylan Verheul or Dan G. Switzer can not handle it – is there someone out there who you has modified the plugin to work with german umlaut ?

  293. xyz
    7. March 2008 |10:25

    Hello, I can set multiple and multipleSeparator. Default is comma ‘,’. But I want to have in textarea separator by new line.
    multipleSeparator : “\n” doesn’t work.
    Any help?

  294. xyz
    7. March 2008 |14:15

    Ok, I think I found the solution few post above:
    “There seems to be an issue with a multipleSeparator of ” ” (space only). I modified line 366 from:

    var words = value.split( $.trim( options.multipleSeparator ) );

    To:

    var words = value.split( options.multipleSeparator );

    Simply removed the trim.”

  295. Arian
    7. March 2008 |23:00

    hmmm any problems in new trunk with choosing an item with the mouse [when have a focus() handler on textfield too]?
    I can choose an item with keyboard arrows and Enter, but with mouse in both IE and FF just give the field focus again which runs my handler clearing the field (I think with the new css which changed in trunk, it messes up in FF too which it didnt do before).

    i would like to clear the textfield for clientName plus the clientID (which is set by .result ) when user focuses back on the textfield to fix his mistake (otherwise he has to backspace to delete everything).

    $j(“#clientName”).focus(function() //user retyping into field
    {
    $j(“#clientID”).val(“”);
    $j(“#clientName”).val(“”);
    });

    But after .result gets done, it seems to focus back to the field, and immediately clearing what just got autocompleted (unless you use keyboard)

    Btw My .result looks like:

    $j(“#clientName”).result(function(event, data, formatted)
    {
    $j(“#clientID”).val( data[2] );
    $j(“#nic”).focus(); //jump to next field
    });

    I’ll check this weekend to see if i make a full example i can send to you.
    Thanks,
    Arian

  296. 13. March 2008 |04:45

    firefox debug

    input ‘ ‘ as first word ,

    function onChange(crap, skipPrevCheck) {

    ……

    currentValue = lastWord(currentValue);
    //firefox debug
    if (!currentValue) {
    return ;
    }

    …..
    }

  297. Arian
    13. March 2008 |16:18

    Temporarily just setup an option called avoidFocus and changed this line
    on 679
    input.focus();
    //to
    if(options.avoidFocus == true){ input.focus(); }

  298. Arian
    13. March 2008 |16:26

    whoops[delete last post Jorn]…
    Temporarily just setup an option called avoidFocus and changed this line
    on 679
    input.focus();
    //to
    if(options.avoidFocus != true){ input.focus(); }

  299. Engels
    14. March 2008 |08:11

    Hi Jörn,
    in rev4485 there is an issue with the ‘ac_odd’ and the not yet implemented? ‘ac_even’ classes. After the result is shown, there are alternate background colors in the list. But if i go with KEY.UP/KEY.DOWN through the list, the classes for the background are not restored for the last selected item (CLASSES.ACTIVE). With mouse wheel it is fine. I changed it as follows:

    649:
    var CLASSES = {
    ACTIVE: "ac_over",
    EVEN: "ac_even",
    ODD: "ac_odd"
    };

    706:
    listItems.slice(active, active + 1).removeClass().addClass(active%2 == 0 ? CLASSES.EVEN : CLASSES.ODD);

    746:
    var li = $("<li>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 ? CLASSES.EVEN : CLASSES.ODD).appendTo(list)[0];

    If I gone right, maybe you can change the code, so it is in the next packed version?

    Thanks for the plugin,
    Engels

  300. 14. March 2008 |20:40

    You can use json format if you change the dataType and add your own parse function like:

    dataType: 'json',
    parse: function(data) {
    var parsed = [];
    for (var i=0; i
    Be sure to change the value and result lines to be something meaningful from your json response. Also if you return a json object that looks like the parsed variable above you can just set your parse() return data.

  301. andreas
    18. March 2008 |01:31

    Small bug: The even list items are in class ac_even*t* instead of ac_even.

    Thanks for all your work
    Andreas

  302. Remy Tiitre
    20. March 2008 |04:09

    Would it be a bad idea to add a new trigger thats executed when the text is not in the options list. I mean, if you enter something thats not listed. mustMatch doesnt seem to work, and I would like to run some code anyway when that happens. I don’t think its possible right now.

  303. Remy Tiitre
    20. March 2008 |14:31

    ac_loading is not working. In FF at least the class gets never assigned to input box. I added sleep(10) to my php script to test that and no results. Tried to use loadingClass as well, but it seems to have the same problem. Might be that I do something wrong.

  304. Remy Tiitre
    20. March 2008 |16:26

    Why I can’t use
    $('#user_name').result(function(event, data, formatted) {}).focus();
    when I use keyboard? Something is takeing the focus away. If I use mouse, everything is working ok.

  305. 24. March 2008 |20:48

    This is a great script! Could you add to the notes that if you do not want a max parameter, enter the ‘max’ parameter as 0 (max: 0). I was able to solve it by trial and error, but I figure it will save others that are looking to do the same thing a little time.

    Thanks,

    –Joe

  306. 26. March 2008 |04:41

    I made some changes in your autosuggest so that it shows preformatted html like images in the list, thus making it Image-List control. I have done it using asp.net.

    Have a look please.

    http://ramanbasu.com/tricks/autosuggest/default.aspx

  307. Corey Coto
    27. March 2008 |15:43

    Jörn,

    Great plugin!

    I made a minor modification to the plugin that allows JSON data to be loaded from a URL. If you are interested in checking out my change and merging it into your code please let me know. I think it would a great enhancement because it allows you to load data from web services.

    Thanks,
    Corey

  308. 27. March 2008 |19:04

    The ac_odd and ac_event styles are removed when you change the ac_over from one item to another.


    function moveSelect(step) {
    // specify which class is to be removed: CLASSES.ACTIVE
    listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);

  309. Jiming
    28. March 2008 |11:53

    Jörn,

    Thanks for this great plugin!

    As a autocomplete, i think it is powerful enough so far. I want to use it as a SELECT like plugins in certain case, and I do not want to add another plugin since I like this one very much. But using this one, my select options will be filtered when user input chars, which does not behave as a SELECT do, could you please consider of adding an option to forbidden the filter feature?

    Thanks again!

    Jiming

  310. dineshv
    1. April 2008 |17:31

    I know this question has been asked but I haven’t seen a complete response yet.

    - Has JSON support been fixed (as per Jorn’s email of July 4, ’07)?

    - How do you use the AC plugin for remote data which is requested again and again?

    - Is there example code someplace?

    Cheers

    Dinesh

  311. 1. April 2008 |18:28

    How about creating dynamic client side multiple row addition feature with autosuggest? :)

  312. xyz
    2. April 2008 |10:32

    In opera, when You are choosen (by UP or DOWN key) an item, the cursor moves in main textarea. When I press Enter, then the item is insert in textarea exactly where is cursor (wchich was moved) and is problem. Is any way to stop moving cursor in textarea during choosing item from list?

  313. Sean
    3. April 2008 |00:06

    Hello

    I would like to pass a value of the current and also a different field into the external script so that it returns relevant results to the autocompleter.

    Is something like this possible?
    input#county is the current field – for auto completion

    $.getJSON(base_url+"search/jquerycountysearch/"+$("input#county").val(), function(data){
    $("input#county").autocomplete(data, {
    minChars: 0,
    width: 310,
    matchContains: true,
    formatItem: function(row, i, max) {
    return row.optionValue + " <" + row.optionValue + ">";
    },
    formatResult: function(row) {
    return row.optionValue;
    }
    });
    })

    Thank you
    Sean

  314. 5. April 2008 |17:53

    Hi folks!
    First of all: Jörn, thank you for the great plugin!

    I have a question that maybe is related in my lack of knowledge in javascript programming but I think that it could help someone else in my same situation :)

    I have initialized some autocomplete fields successfully, i have setup an onload event which changes extraParams trought setOptions() basing on some server-side conditions, now I need to dinamically change one (and only one) extraParams. Is there a way for “accessing” the options object for every autocomplete?

    I’ve tried adding a getOptions() function right after setOptions() in the sourcecode but without success, I cannot understand why it doesnt work:

    /*...*/
    setOptions: function(options){
    return this.trigger("setOptions", [options]);
    },
    getOptions: function(){
    return options;
    }
    /*...*/

    Forgive my bad language and my stupid question.

    Thanks in advance.

    Alex

  315. solot
    5. April 2008 |23:17

    hi, is this usable for an input filed like gmails address bar, where you can enter N values separated by comma.

  316. Andrea
    7. April 2008 |10:58

    if i type a letter, then remove it from the input box using del key, then type again the same letter the options list doesn’t appear anymore!
    it does if i type a different letter the second time or if i remove it the first time using backspace.
    is it a bug?

    Thanks

  317. Chintan
    8. April 2008 |02:05

    I have just begun using this feature. I want to implement the autocomplete feature which requires me passing extra parameters. I am not able to do it using the extraParams option. Even I am not able to add any options. Firebug replies with the error

    ‘Syntax error’ on the line where I bind the autocomplete feature to the input textbox


    $("#DATA_POINT_TEXTBOX34").autocomplete("/main/control_ui_editor.php",{delay:10});

  318. 8. April 2008 |16:07

    thinkI found a bug and the solution. when you use the arrow keys to move up and down a result list all classes are removed from the selected item upon selection change. The problem with this is that you loose your odd row styling.

    The problem is in
    function moveSelect(step) {
    istItems.slice(active, active + 1).removeClass();
    ……

    the removeClass call should be limited to the over class like so

    listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);

    hope that makes sense and is helpful for someone.

  319. jiangti
    9. April 2008 |14:05

    Is there a way that i can search from the middle of a word?

    For example, the word i type in is “manipu” and the result bring up “image manipulation”

  320. brad vincent
    10. April 2008 |16:11

    Hey Jörn
    thnx for the excellent plugin.
    i noticed some issues
    1) when you move down the list with arrow keys the alt row styling is lost
    2) when you get the end of the list it goes to the begining and when u go up from the 1st item it goes to the end.

    i edited the following functions to overcome the above :

    function movePosition(step) {
    active += step;
    if (active = listItems.size()) {
    active = listItems.size() – 1;
    }
    }

    function moveSelect(step) {
    //old :listItems.slice(active, active + 1).removeClass();
    listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);
    movePosition(step);
    var activeItem = listItems.slice(active, active + 1);
    activeItem.addClass(CLASSES.ACTIVE);
    if(options.scroll) {
    var offset = 0;
    listItems.slice(0, active).each(function() {
    offset += this.offsetHeight;
    });
    if((offset + activeItem[0].offsetHeight – list.scrollTop()) > list[0].clientHeight) {
    list.scrollTop(list.scrollTop()+ (offset + activeItem[0].offsetHeight – list.scrollTop()) – list[0].clientHeight);
    //old : list.scrollTop(offset + activeItem[0].offsetHeight + list[0].clientHeight);
    } else if(offset

  321. Dayberry
    10. April 2008 |16:19

    I have been unable to add an onchange event for any field with an autocomplete. Is there any way to achieve this?

  322. nicolas
    11. April 2008 |15:27

    For the focus, I have just add the followings parameters, and it works fine in FF:

    multiple: true,
    multipleSeparator: “”

  323. Prem
    12. April 2008 |01:49

    Hi, Do I need to purchase any license to uses your code in my project

    Prem.

  324. John
    14. April 2008 |10:22

    Awesome work – but I’ve been wondering how to do the following:
    My php script (for a remote lookup) can accept a variable ‘s’ which changes it’s behaviour from matching anywhere in the data, to matching from the start of the data.
    I would like to have a checkbox to enable/disable this.
    I know I need to add (and remove) extraParams{s:1}, but I don’t know how to add this dynamically to the autocomplete(…) settings?
    Any help welcomed!

  325. thiago
    14. April 2008 |21:50

    finnally, how can we use autocomplete with data comming from server as a JSON string to be parsed at client side?

  326. Hesham
    15. April 2008 |18:02

    3 things:

    1) First of all, great work! This is absolutely marvelous. :-))

    2) I had trouble with select elements poking through the list when I scrolled using mouse wheel or keyboard. It turns out that my html doctype declaration had the word. Transitional. As soon as i removed “Transitional” the problem cleared.

    was:

    changed to:

    The side effect of my changing the doctype was that my elements were misaligned; I therefore fixed that via CSS :

    body, td, th, textarea {
    font-family: Arial, Helvetica, sans-serif, Geneva, “Bitstream Vera Sans”,”Trebuchet MS” ;
    font-size: 12px;
    text-align:left;
    }

    3) when i select an item from the list using the enter on keyboard, the focus is entirely lost from the element. I read something quickly on this forum, but am not sure how to address it.. i will propbably need to look deeper into the options or add code to put back the focus to the element. If you happen to stumble on this, please drop me a quick email and let me know the most elegant way to address this.

    Best regards and thank you for sharing your great work, all of you,

    Hesham

  327. Hesham
    16. April 2008 |01:56

    Question: is there any way to work around the elments poking through the list without having to change DOCTYPE ? That would really save me a lot of hassle having to heavily customize my css.

    Any help you can provide is greatly appreciated. :)

    I’m running the autocomplete on IE6.

    cuasing the problem: DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

    Removing the word Transitional clears the problem.
    sorry for repeating this, I tried pasting the code without success.

  328. dineshv
    17. April 2008 |03:43

    I know this is a simple question but … In the Autocomplete multiple
    cities example (http://dev.jquery.com/view/trunk/plugins/
    autocomplete/) how do you send the final set of chosen entries to the
    server ie. all the values in the input box when “Get Value” is
    clicked?

    Cheers

  329. 17. April 2008 |16:03

    I can confirm Fabien Meghazi’s comment of January 28: focusing before setting up autocomplete leads to a very malfunctioning autocomplete.

    $("#autocomplete).focus().autocomplete("suggestions.php");

    At least in Firefox 2 and Safari 3 this is not working. It’d be cool to either mention this in the FAQ or to fix this.

    Thanks for this awesome plugin!

  330. 18. April 2008 |08:48

    Jörn, thanks a lot for your work.
    my problem *was*:
    a user write some letters of a name in an input box; ajax goes into a database, pick the matching surnames, emails, phones…, and list them as:
    name surname – email
    the user picks one row from the list and then the input boxes such as surname, email, phone are filled with the corresponding data.

    i was going mad.
    with your scripts i’ve done it in minutes.
    thanks, again.

  331. Raja
    21. April 2008 |03:12

    Hi,

    Is there any method which can be called to find out if the autocomplete AJAX query is still executing and the autocomplete options are still to be displayed?

    Thanks and Regards,
    Raja.

  332. Dayberry
    22. April 2008 |21:54

    I have a small problem with your code. I am using a combination of multi selects and single. On the multi select, when you select an item or two and hit tab, it goes to the next text box, on the single, the cursor disappears and if you hit it one more time, it goes to the very first text box on the page. It would be very handy if hitting tab again simply continued through the form fields.

  333. 24. April 2008 |12:18

    Jörn and other gifted peeps

    Hi.

    I am trying to do something that seems obvious to me, yet a little weird as nobody else seems to have asked or done it.

    I have the plugin working fine, and the backend script supply all the correct data. As the lookup successfully finds what it is looking for, I am trying to make the information returned in the list http link to the found row:
    e.g.

    function formatItem(row) {
    return "" + row[1] + "";
    }

    function formatResult(row) {
    return row[1];
    }

    $('#ajaxsearch').autocomplete("search.php", {
    width: 800,
    max: 20,
    formatItem: formatItem,
    formatResult: formatResult
    });

    The information replied from the server is:
    http://www.example.com/first_link.htm|First link…

    The problem iis, when the user clicks the link in the list the click is consumed by the component and the href link is not followed.

    How can I get this component to not consume the click and therefore enable the browser to follow the href link?

  334. 24. April 2008 |12:20

    OOOppppssss, sorry forgot to format one of the above functions correctly:


    function formatItem(row) {
    return "&lta href='" + row[0] + "'&gt" + row[1] + "&lt/a&gt";
    }

  335. dineshv
    24. April 2008 |16:42

    I’ve noticed that if multiple: true and multipleSeparator: ‘string’ that it always defaults to string=”, “.

  336. Tuyra POL
    24. April 2008 |17:04

    Hi;
    I want to use multiple suggest with one file.
    For ex:

    $().ready(function() {
    $("#tyur").autocomplete("hehe.php", {
    width: 260,
    selectFirst: true
    });
    });
    $().ready(function() {
    $("#sdsd").autocomplete("hehe.php", {
    width: 260,
    selectFirst: true
    });
    });

    in hehe.php
    if ($_GET['q'])
    ??????? how can i use it ?

  337. 25. April 2008 |13:24

    Is there a method for setting a post-selection call back? I’ve tried using formatResult, but that is being called during the data acquisition. I’m looking for a way to append data resulting from the selection to a hidden input field.

  338. 25. April 2008 |19:34

    Hey theintoy,

    I was just on here and thought I *might* be able to help.

    Here’s something I use:

    $("#driverName").autocomplete("../ajax/DriverSearch.php", {
    delay: 150, minChars: 3, width: 336, max: 10, matchSubset: false, scroll: false,
    formatItem: function (row){
    return "" + row[0] + "" +
    "" + row[2] + "";},
    formatResult: function (row){return row[0] + "...transferring...";}
    });
    $("#driverName").result(function(event, data, formatted) {
    $("#driverName").attr("disabled", "disabled");
    document.location.href = 'DriverDisplay.php?driverID=' + data[1];
    });

    I’m no expert but I think it does what you’re trying to accomplish.

  339. 27. April 2008 |16:36

    @Jean: You can now use the formatMatch-option to specify what to use for searching.

    @al_shopov: Thanks, fixed.

    @graeme d: Wrap the value in a function which returns it, it’ll get called before sending the request.

    @Piotr Gabryjeluk: Thanks for the pointer, fixed in latest revision.

    @al_shopov: Tickets are preferred for specific requests.

    @Gideon: Fixed in 1.0 release.

    @Markus: Currently not supported.

    @Allan Kikkas: Fixed in 1.0 release.

    @mansoft: I’ve successfully used the plugin with german umlauts, yes. Its mostly a matter of the server sending the right encoding – where UTF-8 yields the most reliable results.

    @xyz: That fix is now part of the 1.0 release.

    @Engels: That issue is fixed in the 1.0 release. Now only the ACTIVE class gets removed on scrolling.

    @andreas: Thanks, fixed!

  340. 27. April 2008 |21:08

    @Joe Dolan: I’ll give that a try and add it to the docs. Thanks.

    @Brian: Thats fixed in 1.0.

    @Jiming: So you want just the list, without any filtering? Whats the point of a replacing a select then?

    @dineshv: Setting up json-powered autocomplete is possible and there are several json-examples in the demo. More to come.

    @Sean: You should pass that county-data as a parameter, using the extraParams-options. It accepts a callback as parameters, so you just have to specify a function that returns the current county-value.

    @Alex: Same as above, use extraParams with functions as the value.

    @solot: Yes, it is, with the limitation that values can be added only at the end of the input. Take a look at the multiple-option and related examples in the demo.

    @Andrea: Yes, that is a bug. Thanks for reporting, I’ll take a look.

    @jiangti: Yes, via the matchContains-option.

    @brad vincent: The first issue is fixed. The second is intended behaviour, allowing you to navigate to the end of the list very fast, or back up to the top.

    @Dayberry: I’m working on a solution to improve tab-handling.

    @Prem: The code is dual-licensed under MIT and GPL, like jQuery itself. Donations (via Paypal) are welcome.

    @John: Use the setOptions method.

    @Hesham: The focus/blur issue has top priority. Its in place to avoid the even more annoying issue of accidentally submitting the form.

    @Wim Leers: Thanks for confirming the issue and providing example code. I’ll try to fix the issue.

    @Raja: You could leverage jQuery’s global ajax events to track requests. They all provide the settings that are passed to $.ajax as an argument, so you could match autocomplete requests via settings.url.

    @theintoy: Thats an interesting problem of unintended usage. I’ll have to give it a try to see how a workaround could look like. A testpage would help.

    @Tuyra POL: What exacetly is the issue?

    @Rogers Hellman: Yes, using the result(Function )-method.

  341. 27. April 2008 |21:09

    Comments are now closed.

    • Please post questions to the jQuery discussion list, putting [autocomplete] into the subject of your post, making it easier to spot it and respond quickly.
    • Please post bug reports and other contributions (enhancements, features) to the jQuery bug tracker (requires registration). Please put [autocomplete] into the title of a ticket.