2,000+ jQuery UI 自动完成组合框抛出停止响应错误

发布于 2024-11-04 16:39:44 字数 1666 浏览 1 评论 0原文

只是想确认我已经超出了 jQuery UI 自动完成组合框的实际限制，我在 FF 中收到以下错误：

此页面上的脚本可能正忙，或者它可能已停止响应。你现在可以停止脚本，打开调试器中的脚本，或者让脚本继续。

该页面是一个由 php 生成的大表（2000 多行），它将每行包含 7 个这样的组合框（7 列），但是我几乎无法浏览该组的第一列。该页面将加载并运行，但需要几分钟的时间，并且浏览器会在一段时间内变得无响应。

有没有办法改变 JS 以使其更高效？下面是 JS 的示例，我使用 php 将数组插入到脚本中（第 3 行）。

代码：

            <script type='text/javascript'>
  var input = new Array();
var i = 1;
<?php echo $JSElements; ?> //PHP
$('.TC_1').each(function(index) {

input[i] = $("[name=TC_"+i+"_1]").autocomplete({
    source: elementArray,
    select: function(){alert("selected");},
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");

//Get the id for the target field:
    var target = $(input[i]).attr('name');
    var ID = target.substr(3);

$("<button id='bt_"+ID+"' type='button'>&nbsp;</button>")
    .attr("tabIndex", -1)
    .attr("title", "Show All Items")
    .insertAfter(input[i])
    .button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    })
    .removeClass("ui-corner-all")
    .addClass("ui-corner-right ui-button-icon")
    .click(function() {

        // close if already visible
        if ($("[name=TC_"+ID+"]").autocomplete("widget").is(":visible")) {
        $("[name=TC_"+ID+"]").autocomplete( "close" );
             return;
        }
        $(this).blur();
        $("[name=TC_"+ID+"]").autocomplete("search", "" );
        $("[name=TC_"+ID+"]").focus();
    });
    i++;
});
  </script>

如果没有办法让它工作吗？谁能提出任何替代方案？请记住，可能会有大约 8,000 个字段！如果没有，我的最后一招是自定义构建一个简单的 ajax 下拉列表。

原文

Just wanting to confirm that I've exceeded the the practical limitation of the jQuery UI autocomplete combobox, I get the following error in FF:

A script on this page may be busy, or
it may have stopped responding. You
can stop the script now, open the
script in the debugger, or let the
script continue.

The page is a big table (2000+ rows) generated from php, it was going to contain 7 of these combo boxes (7 columns) per row, however I can barely get through the first column of the set. The page will load and function but it takes several minutes and the browser becomes non-responsive for a while.

Is there perhaps a way to alter the JS to make it more efficient? Below is a sample of the JS, I'm using php to insert the array into the script (line 3).

Code:

            <script type='text/javascript'>
  var input = new Array();
var i = 1;
<?php echo $JSElements; ?> //PHP
$('.TC_1').each(function(index) {

input[i] = $("[name=TC_"+i+"_1]").autocomplete({
    source: elementArray,
    select: function(){alert("selected");},
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");

//Get the id for the target field:
    var target = $(input[i]).attr('name');
    var ID = target.substr(3);

$("<button id='bt_"+ID+"' type='button'> </button>")
    .attr("tabIndex", -1)
    .attr("title", "Show All Items")
    .insertAfter(input[i])
    .button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    })
    .removeClass("ui-corner-all")
    .addClass("ui-corner-right ui-button-icon")
    .click(function() {

        // close if already visible
        if ($("[name=TC_"+ID+"]").autocomplete("widget").is(":visible")) {
        $("[name=TC_"+ID+"]").autocomplete( "close" );
             return;
        }
        $(this).blur();
        $("[name=TC_"+ID+"]").autocomplete("search", "" );
        $("[name=TC_"+ID+"]").focus();
    });
    i++;
});
  </script>

If there isn't a way to get this working? can anyone suggest any alternatives? Keep in mind that there will be likely by about 8,000 fields! If not, my last resort is custom building a simple ajax dropdown.

分享到QQ

分享到微博