I was going crazy trying to get this to work on my site. I use floating divs with z-indexes. Because my divs had z-indexes and yours didn't, the suggestion box was appearing below the rest of the items on the site. I added this line to the ".ac_results" item in the css. "z-index: 10000;" That was a high enough number for my site. Maybe there's a "z-index: top;" that would work for every other site? I don't know.

@Tszming:

This is actually a bug w/jQuery v1.1.1 and not with my code. The problem lies in the jQuery pushStack() method.

See the following post from the jQuery Mailing List for more information:

http://www.nabble.com/Bug-in-$()-in-jQuery-v1.1.1--t3144910.html#nabble.i8718421

I found bug today...

you can replace the source with my function below, the problem of the original source is: even matchSubset is set to 0, your initialization will turn it into 1 anyway.


jQuery.fn.autocomplete = function(url, options, data) {

   // Make sure options exists
   options = typeof(options) != 'undefined' ? options : {};

   // Set url as option
   options.url = url;
   // set some bulk local data
   options.data = ((typeof data == "object") && (data.constructor == Array)) ? data : null;

   // Set default values for required options
   options.inputClass = typeof(options.inputClass) != 'undefined' ? options.inputClass : "ac_input";
   options.resultsClass = typeof(options.resultsClass) != 'undefined' ? options.resultsClass : "ac_results";
   options.lineSeparator = typeof(options.lineSeparator) != 'undefined' ? options.lineSeparator : "\n";
   options.cellSeparator = typeof(options.cellSeparator ) != 'undefined' ? options.cellSeparator : "|";
   options.minChars = typeof(options.minChars) != 'undefined' ? options.minChars : 1;
   options.delay = typeof(options.delay) != 'undefined' ? options.delay : 400;
   options.matchCase = typeof(options.matchCase) != 'undefined' ? options.matchCase : 0;
   options.matchSubset = typeof(options.matchSubset) != 'undefined' ? options.matchSubset : 1;
   options.matchContains = typeof(options.matchContains) != 'undefined' ? options.matchContains : 0;
   options.cacheLength = typeof(options.cacheLength) != 'undefined' ? options.cacheLength : 1;
   options.mustMatch = typeof(options.mustMatch) != 'undefined' ? options.mustMatch : 0;
   options.extraParams = typeof(options.extraParams) != 'undefined' ? options.extraParams : {};
   options.loadingClass = typeof(options.loadingClass) != 'undefined' ? options.loadingClass : "ac_loading";
   options.selectFirst = typeof(options.selectFirst) != 'undefined' ? options.selectFirst : false;
   options.selectOnly = typeof(options.selectOnly) != 'undefined' ? options.selectOnly : false;
   options.maxItemsToShow = typeof(options.maxItemsToShow) != 'undefined' ? options.maxItemsToShow : -1;
   options.autoFill = typeof(options.autoFill) != 'undefined' ? options.autoFill : false;
   options.width = typeof(options.width) != 'undefined' ? parseInt(options.width, 10) : 0;

   this.each(function() {
      var input = this;
      new jQuery.autocomplete(input, options);
   });

   // Don't break the chain
   return this;
}

@Kevin:

I've added a link at the bottom to download the autocomplete_ajax.cfm as a text file.

It's pretty simple--you just want the script to spit out a pipe ("|") delimited list separated by new lines. Each line is converted into an array using the pipe delimiter.

@Todd:

You can use the extraParams option to pass in addition URL parameters to pass.

So to pass an ID of 123456, you do the following:

$("#FriendName").autocomplete(
   "autofill_friends2.php",
   {
      delay:10,
      minChars:2,
      matchSubset:1,
      matchContains:1,
      cacheLength:10,
      onItemSelect:selectItem,
      onFindValue:findValue,
      formatItem:formatItem,
      autoFill:true,
      extraParams: {"id": "123456"}
   }
);

@Randy,

I sent this reponse to your jQuery mailing list inquiry:
http://groups.google.com/group/jquery-en/browse_fr...

@Jens:

I know there is a problem in the makeUrl() when sending special characters that can be fixed with:

function makeUrl(q) {
   var url = options.url + "?q=" + encodeURI(q);
   for (var i in options.extraParams) {
      url += "&" + i + "=" + encodeURI(options.extraParams[i]);
   }
   return url;
};

If this doesn't fix the issue, make sure that both the page where the page where the Autocomplete plugin is and the response page both return the same charset. I'd recommend using UTF-8, just because IE tends to handle special characters better when you use that charset.

@Michael:

This version does not support multiple values.

There is an autocomplete plug-in that's been in the works that does:

http://jqueryjs.googlecode.com/svn/trunk/plugins/a...

There are still issues that are being worked on--such as the autocomplete suggestions only work on the last entry (which means you don't get the suggestions if you're editing a 1st or 2nd values if you have 3 values in the field.)

For support for this plug-in, I suggest you post messages to the jQuery Discussion list.

@Michael:

Yes I was referring to the General Discussion List:

http://groups.google.com/group/jquery-en

@Chez:

In the current source code, there's no way to update array. Invoking the autocompleteArray() a second time on a field will create a 2nd instance of the plugin on the field--which will cause problems.

You could add a method to update the array (you'll also want to make sure that you call the flushCache() method as well to clear) or you could use the latest mod:

http://dev.jquery.com/browser/trunk/plugins/autoco...

The version at the URL above was re-written by Jörn, with some assistance from myself.

It has a setOption() method which would allow you to update the data key with some new array data.

I'm a bit new with JQuery - if I want the value of a hidden form field to be updated with the value of the selected choice, what would be the code I need to use. Thanks in advance.

For example, if Woodstock is selected in the Ajax form, I want to populate the hidden form field with 1059.

Thanks in advance -
Stephen

Dan, thank you very much for this code.

I've set it up in my project and it works fine when testing with Firefox. But Internet Explorer refuses to even load the page. Just says "Operation aborted".

Any ideas?

While that worked, it still does not seem to activate on load... I need to tab out to another field, tab back and then it automatically starts working. But when the page loads, and the autocomplete field gets focus, the loading gif shows up but there are no results showing... Any ideas?

Hi, nice script.

I was wondering if this plugin supported matching ala textmate. That is, as long as the input characters are in the right order, a match is true even if there are skpped characters. For example, if the user had type 'jm', the following would match:

12345 Jim
John Mann
4567 Ajax Money

Thanks

Is there any way to add additional properties when using a local array similar to what you can do with the Ajax calls and the '|' character? I'm making a menu type object, and using only the text inside the links for the autocomplete function to search. I need it to respond with the entire link though so that it is clickable.

Great plugin Dan! I would using it for a chained menu, but...

I don't get the result menu after passing a value to a second autocomplete input like #autocomplete2

At #autocomplete1 I use onItemSelect:getFieldValue,

function getFieldValue(li) {
if( !!li.extra ) {
var sValue = li.extra[0];
$("#autocomplete1_hidden").val(sValue);
$("#autocomplete2").val(sValue);
$("#autocomplete2").findValue(); // not correct I think
}
}

Only when I'm using my left cursor at #autocomplete2, then I get results.

Please help!

For some reason my code doesn't fire onItemSelect function. Could you please help me?

Following is the code.

$("#control").autocomplete
(
url,
{
extraParams: { propertyoid : property },
delay: 750,
width: 260,
onItemSelect:function(li)
{
alert(123);
},
formatItem:function(data, i, total)
{
return data[0];
},
formatResult:function(data, i, total)
{
return data[0];
}
}
);

@Azadi:

There is no way to completely destroy it--at least without modifying the code. You could delete the input element and re-create it, which would remove the behavior.