对话框错误中的 JQuery 自动完成

Question

全部，

我在 JQuery UI 对话框中使用 JQuery Autocomplete Plugin 1.0.2。不幸的是，在 IE 和 FireFox 中有 2 种情况会导致脚本错误。我将提供 FireFox Firebug 错误，因为它们更具描述性。

首先，这里是允许选择多个名称的 JQuery 自动完成脚本：

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

现在，以下是导致错误发生的两种情况：

---

1) 在其他任何内容之前输入一个空格“”，我会立即得到

错误：currentValue 未定义； onChange()jquery.a...mplete.js（第 239 行）； [打破这个错误] if (currentValue.length >= options.minChars) {

2) 在自动完成下拉列表打开时关闭对话框，但不选择项目

*这是我应该修复的报告的错误。对话框关闭后，自动完成框将在视图中停留几毫秒到几秒不等。主要目标是在对话框关闭的同时关闭自动完成下拉菜单，而不返回任何错误。我敢打赌，解决错误将解决整体问题。

错误：未捕获的异常：[异常...“组件返回失败代码：0x80004005（NS_ERROR_FAILURE）[nsIDOMNSHTMLTextAreaElement.setSelectionRange]”nsresult：“0x80004005（NS_ERROR_FAILURE）”位置：“JS框架： :http://localhost:2659/Scripts/jquery.autocomplete.js::anonymous :: line 752" data: no]

---

仅查看autocomplete documentation，我发现我可能需要以不同的方式使用 formatItem 选项。

另外，我遇​​到了BGIFRAME，它看起来可能以某种方式提供帮助。

提前感谢您的帮助！

Answer 1

我能够通过将 keydown 事件链接到自动完成代码来解决第一个问题：

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));
    });

这将在最初输入文本区域时禁止空格，并且还会阻止分号后的空格（multipleSeparator）。

#2 仍有问题。我想我需要在 Close 属性或 $('a.close-trigger') 上添加悬停或单击事件，这将从文本中删除 focus()该区域反过来会强制自动完成下拉菜单消失...尚不知道如何使用以下对话框代码完成该操作：

$(".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);
        });
    });