Search jQuery

jQuery Forum

Migrating bassistance.de autocomplete to jquery UI autocomplete

in Using jQuery UI • 11 years ago

Are there any guidelines in migrating the bassistance.de autocomplete to the new jquery UI one? I've found that some of the common events and methods that the old plugin has are not present in the new plugin. Things such as formatItem, which are crucial for outputting a custom layout in the autocomplete just don't seem to have an equivalent. Could you provide some direction here?

Replies(10)

fontzter

Re: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

Hi,

I plan to do this very thing today (hopefully) on a current project. I too had similar questions. Perhaps options like mustMatch and selectFirst need to be handled on callbacks. It appears that caching needs to be written yourself now -- bummer. I'll miss options like matchContains. Seems a shame to have to recreate this.

I will post back my progress if it is helpful. Any pointers from others would be most appreciated.

Thanks,

Dave

sfcalvert

Re: Re: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

I'm totally willing to help out with this. We use the autocomplete in about 10 places in our application, so we definitely need to work out some sort of migration solution.

brian.neal

Re: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

Yes, I am going to miss the caching. I'd be glad to help with this if I can.

joern.zae..

Re: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

The only functionality actually missing from the new autocomplete widget is the multiple-option. That will be implemented as its own widget, a prototype is here: http://github.com/jzaefferer/jquery.ui-tokenlist

For replacing caching or formatItem and various others, use the new source-option. There are demos for caching, custom formatting, or even more custom data.

If you use local data, "matchContains" is on by default. To search only from the start of each value, take one of the custom local data examples and put a "^" at the start of the regex.

It may look like its more complicated then before, but its actually much simpler to do all these customizations, as they are all in one place, and you're not fixed on a few on/off switchs, but can combine and customize whatever you need.

brian.neal

Re: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

Thanks for the clarifications.

Caching seems to be "missing" because now I have to write some non-trivial (for me) code that I didn't have to before. The caching demo you link to only shows how to cache 1 request, not the default of 10 that I had with the old plugin. Caching seems like a commonly needed function, is there any chance a future version of the widget could supply it again?

In any event, I can take a stab at extending the demo and posting it here, but I'm sure my code will require some peer review.

Thanks.

timo.mass..

Betreff: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

The bassistance.de autocomplete automatically selected an item in the autocomplete list while typing, thus the user could use the tab key to automatically fill an input field without the need to select an item in the autocomplete list.

How can this behavior be achieved with the jQuery UI autocomplete?

Thanx in advance.

fontzter

Re: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

Hi Joern,

Thanks for your input. I'm sure the cleaner api will be nice once I get adjusted to it. One feature that I don't see in the new ui version is the mustMatch. This was helpful to disallow spurious items that users may type in. Would you recommend doing this on the close function or the blur of the input? In the "old" version it looks like a search was used to see if the content of the input box returned a valid result. However, it is not clear to me in the current api how this would be done. Any help would be appreciated.

Thanks,

Dave

brian.neal

Re: Migrating bassistance.de autocomplete to jquery UI autocomplete

11 years ago

Here is my "crude but effective" cache example that I came up with. All it is doing is caching up to 16 queries. It isn't doing any of the RegExp stuff in the remote with caching example on the UI site, as I didn't completely understand what that was doing (was that the "matchContains" code?). Comments welcome and I hope someone finds this useful.

<script type="text/javascript">
$(function() {
    var cache = {};
    var cacheSize = 0;
    $("#id_receiver").autocomplete({
        delay: 400,
        minLength: 2,
        source: function(request, response) {
            if (cache[request.term]) {
               response(cache[request.term]);
               return;
            }
            $.ajax({
                url: "/your/url/here/",
                type: "GET",
                data: {
                    q: request.term,
                    limit: 10
                },
                dataType: "json",
                success: function(data, textStatus) {
                    if (cacheSize >= 16) {
                       cache = {};
                       cacheSize = 0;
                    }
                    cache[request.term] = data;
                    ++cacheSize;
                    response(data);
                },
                error: function(xhr, textStatus, ex) {
                    alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
                      xhr.responseText);
                }
            });
        }
    });
});
</script>