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

Question

全部，

我在 JQuery UI 对话框中使用 JQuery 自动完成插件 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) 在自动完成下拉列表打开时关闭对话框，但不选择项目

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

错误:未捕获的异常:[异常...“组件返回失败代码:0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.setSelectionRange]” nsresult:“0x80004005 (NS_ERROR_FAILURE)”位置:“JS 框架: : http://localhost:2659/Scripts/jquery.autocomplete.js::匿名::第 752 行数据:否]

<小时/>

刚刚查看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));
    });

这将在最初在文本区域中输入时不允许出现空格，并且还会阻止分号(多个分隔符)后出现空格。

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