terça-feira, 19 de agosto de 2014

JQuery AutoComplete - IE Performance

Um dos mais úteis componentes da lista do JQuery UI sem dúvida é o AutoComplete. Porém, existe um problema conhecido de performance ao usar este componente no [Internet Explorer] quando a lista de informações passa de 1000 registros.

Observando mais de perto este problema podemos perceber que no IE a [renderização] dos dados é a causa do problema e não a quantidade de informações da lista em si.

Desta forma, se você estiver passando por este problema no IE poderá alterar o atributo [source] do componente para executar uma função específica criada por você para justamente [limitar] a quantidade de dados de retorno que será renderizada no Browser.

Segue um exemplo:

No momento da transformação do seu TextBox em um Lookup, adicione a chamada da sua função (CustomAutoCompleteFn)


with ($("#TEXTBOXID")) {
        autocomplete({
            source: function (reg, responseFn) { CustomAutoCompleteFn(reg, responseFn) },
            delay: 0,
            minLength: 2
        });
}


E a função em si:


function CustomAutoCompleteFn(req, responseFn) {
    // LIMITANDO A LISTA DE RESULTADOS POR RETORNAR OS 40 PRIMEIROS
    var b = new Array();
    var re = $.ui.autocomplete.escapeRegex(req.term);
    var matcher = new RegExp("\\b" + re, "i");
    var a = $.grep(listInfo, function (item, index) {
        r = matcher.test(item.value);
        return r;
    });
    b = a.slice(0, 40);
    responseFn(b);
}


O interessante desta função é que você mesmo efetua o filtro no seu Array de informações (var listInfo) e retorna para ser renderizado no Browser apenas a quantidade que deseja, através da linha [b = a.slice(0, 40)].

Desta forma sua performance fica garantida mesmo com uma lista de informações extensa.

Fonte: JQuery Forum

[]

Nenhum comentário:

Postar um comentário

<< Ao enviar um comentário, favor clicar na opção [Enviar por e-mail comentários de acompanhamento para gtezini@gmail.com] >>