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.

Dear Dan,
don't take my request into account, I just read that you already answered the same question to someonelse in the comments above.
For next readers, an array of array is:
[ ["Allen",1]
 ,["Albert",2]
 ,["Alberto",1]
 ,["Alladin",1] ]

Thanks

Sorry for my hasty post -- I see what's going on now. Your 'autofill' function assumes that the first match is the best, but if the first match contains a substring and therefore doesn't start at position zero, the autofill doesn't line up. I can probably mess with the autofill function to do what I want, unless there's something better you can recommend. I do want to keep "matchSubset" set to "1".

I should say the first call to autocompleteArray is resides within a   $(document).ready(function(){
    }

thanks

Thanks for the fast response Dan. I will do that.

como hago para que el autocompletar funcione sin almacenar datos en cache, cuando lo utilizo por primera vez me trae los datos bien con un select a la BD, pero cuando lo utilizo por segunda vez con otro select a la BD que no me trar informacion, este autocompletar me sigue mostrando los resultados como si yo mandara el primer select. como lo soluciono, como borro la caché despues de traer los datos, o como configuro para que no muestre nada si la consulta a la base de datos no tiene informacion???????

Hey, great Plug -in !!! Really usefull

But i have problems with the encoding / charset. My database is in windows 1251. But it only showa "?????".
Any idea how to fix this? I read other suggestions but it doesn't really work.
Thanks in advanced!

Hey i love the work. One question i have is, is there a way to bold or highlight the entered characters in the form field and in the results list?


Regards

Hi Dan,

You seem to know a lot about this AutoComplete add in. I wonder if you can help with the following issue.

From a Popup, which is a form in an IFrame, the list of selections array in an AutoComplete modified input tag on the parent form is modified. The input tag is reprocessed with Autocomplete

i.e. parent.$("#InputTagName").AutoComplete(parent.ArrayName, {})

The AutoComplete code creates a new cache and sets the correct matched sets based on the modified array but when the popup is closed only the old list is present in the parent form input tag.

I guess the new cache is associated with the current form even though the modified input tag is on the parent form.

This sounds impossible, at least with my level of understanding of Javascript, but can the parent form AutoComplete cache be modified from the child Iframe(d) form?

Thanks for that Dan,

I did consider changing to the UI AC but felt that it might not be any better at implementing this requirement.

I'll try it..