более 2000 выпадающих списков автозаполнения jQuery UI перестали отвечать на ошибку

#jquery #user-interface #autocomplete #combobox

#jquery #пользовательский интерфейс #автозаполнение #выпадающий список

Вопрос:

Просто желая подтвердить, что я превысил практическое ограничение выпадающего списка автозаполнения jQuery UI, я получаю следующую ошибку в FF:

Возможно, скрипт на этой странице занят или перестал отвечать. Вы можете остановить скрипт сейчас, открыть скрипт в отладчике или позволить сценарию продолжаться.

Страница представляет собой большую таблицу (более 2000 строк), сгенерированную на php, она должна была содержать 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'>amp;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>
  

Если нет способа заставить это работать? кто-нибудь может предложить какие-либо альтернативы? Имейте в виду, что, вероятно, будет около 8000 полей! Если нет, моим последним средством является пользовательское создание простого выпадающего списка ajax.

Ответ №1:

Текущая версия плагина автозаполнения jQuery фактически принимает URL-адрес, что упрощает запуск Ajaxy goodness.

Смотрите здесь

Комментарии:

1. Да, я понял, но вы же не думаете, что само количество этих парней, которых я пытаюсь создать, вызывает ооооочень низкое время загрузки? Способ, которым я это делаю, заключается в переборе текстовых полей, преобразовании их в выпадающие списки и создании уникальной соответствующей кнопки.

2. Но преимущество версии ajax в том, что вы можете фильтровать результаты на стороне сервера, прежде чем отправлять их в браузер. Когда выполняется вызов ajax, он передает текущее содержимое текстового поля в строку запроса, чтобы вы могли отобрать подавляющее большинство результатов. Это предполагает, что проблема с производительностью еще не на стороне сервера 😉