JQuery Autocomplete in Dialog Errors

Question

All,

I am using the JQuery Autocomplete Plugin 1.0.2 in a JQuery UI Dialog. Unfortunately, there are 2 scenarios that cause script errors in IE and FireFox. I will be providing FireFox Firebug errors as they are more descriptive.

First off, here is the JQuery Autocomplete script which allows for the selection of multiple names:

var queues = <% Html.RenderAction("AvailableQueues"); %>;
$($.jqId("requestQueuesText"), $theForm).autocomplete(queues, {
    minChars: 1,
    formatItem: function(row) {
        return row.Description;                
    },
    multiple: true,
    multipleSeparator: ";"
 });

Now, here are the two scenarios that cause the errors to occur:

---

1) Type a space " " before anything else and I immediately get

ERROR: currentValue is undefined; onChange()jquery.a...mplete.js (line 239); [Break on this error] if (currentValue.length >= options.minChars) {

2) Close dialog while autocomplete drop down list is open, but without selecting an item

**This is the reported bug that I am supposed to fix. After the dialog closes, the autocomplete box will stay in the view anywhere from a few milliseconds to a few seconds. The primary goal is for the autocomplete drop down to close at the same time the dialog closes, without returning any errors. I'm betting that resolving the errors will resolve the overall problem.*

ERROR: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.setSelectionRange]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost:2659/Scripts/jquery.autocomplete.js :: anonymous :: line 752" data: no]

---

Just from looking over the autocomplete documentation, I see that I may need to use the formatItem option differently.

Also, I came across BGIFRAME, which looked to possibly help in one way or another.

Thanks in advance for any assistance!

Answer 1

I was able to resolve the first problem by chaining a keydown event to the autocomplete code:

var queues = <% Html.RenderAction("AvailableQueues"); %>;
    $($.jqId("requestQueuesText"), $theForm).autocomplete(queues, {
        minChars: 1,
        formatItem: function(row) {
            return row.Description;                
        },
        multiple: true,
        multipleSeparator: ";",
        selectFirst: false
    }).keydown(function(event) {
        if (this.value != "" && this.value.charAt(this.value.length-1) != ";")
            return true;

        var keycode = $.browser.msie ? event.keyCode : event.which;
        return !/\s/.test(String.fromCharCode(keycode));
    });

This will disallow whitespace when initially typing into the text area and will also prevent whitespace after the semicolon (multipleSeparator).

Still having problems with #2. I think I need to add a hover or click event on the Close property or the $('a.close-trigger') which will remove focus() from the text area which in turn forces the autocomplete dropdown to disappear... Don't yet know exactly how to accomplish that with the following dialog code:

$(".requestLink").click(function(event) {
        event.preventDefault();
        var $this = $(this);
        $this.addClass("loading");
        $.get(this.href, function(data) {
            $this.removeClass("loading");
            var $req = $("<div></div>").dialog({
                autoOpen: true,
                height: 650,
                width: 750,
                modal: true,
                title: "Request",
                overlay: { "background-color": "#d2d2d2", "opacity": "0.40"}
            }).html(data);
        });
    });