Limitar resultados no preenchimento automático da interface do usuário do jQuery


126

Estou usando o preenchimento automático da interface do usuário do jQuery.

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });          

O parâmetro max não funciona e ainda recebo mais de 10 resultados. Estou esquecendo de algo?


11
Não há opção chamada maxno preenchimento automático
Jayantha Lal Sirisena 1/11

Respostas:


272

Aqui está a documentação adequada para o widget jQueryUI . Não há um parâmetro interno para limitar o máximo de resultados, mas você pode realizá-lo facilmente:

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

Você pode fornecer uma função ao sourceparâmetro e, em seguida, chamar slicea matriz filtrada.

Aqui está um exemplo de trabalho: http://jsfiddle.net/andrewwhitaker/vqwBP/


7
Funciona como um encanto. É muito útil se sua lista de preenchimento automático for muito longa (~ 10k resultados) e diminuir a renderização em html.
Benjamin Crouzier 9/10/11

Muito obrigado por isso! Agora posso permitir que os usuários tenham uma lista enorme no localStorage, mas o site parece muito rápido! Encantador! : D muito obrigado por isso! : D tão feliz que por acaso encontrei esta solução ^ __ ^
Alisso

e se houver duas caixas de preenchimento automático na mesma página? Quando eu faço a fatia de resposta em ambos, ambos corte parada em tudo: /
Alisso

+1 para esta solução. Vou adicionar minLength: 3 para restringir mais os resultados. jsfiddle.net/vqwBP/295
Adrian P.

2
No jsFiddle da solução fornecida, altere o valor da fatia de 10 para 3 e, na caixa de entrada, insira o caractere C. você receberá apenas 3 valores que, para um usuário final, poderiam levá-lo a acreditar que esses são os únicos três valores disponíveis e pode não continuar inserindo caracteres. Tudo o que estou sugerindo é fornecer um bom texto de ajuda para acompanhar esta solução (por exemplo, apenas os principais resultados correspondentes a XX serão exibidos. Continue digitando para refinar os resultados. "Alguma coisa nesse sentido."
HPWD 13/13/13 /

45

Você pode definir a minlengthopção para algum valor grande ou pode fazê-lo por css como este,

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

Gênio. Eu amo a simplicidade disso e permite que o usuário decida.
Denislexic

18
Isso é bastante hacky. Se você tem uma lista muito longa, e retorna milhares de preenchimento automático de correspondências, será sangrenta lento ...
Vajk Hermecz

1
Concordo com Vajk. Esta é uma solução ruim do ponto de vista da escalabilidade.
Kiksy #

4
Concordo com Vajk. Não brinque com CSS quando o jogo estiver em JS.
Adrian P.

Eu fiz a mesma coisa no meu aplicativo de dicionário. É digno!
Moxet Jan

25

O mesmo que "Jayantha" disse que usar o CSS seria a abordagem mais fácil, mas isso pode ser melhor,

.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden;}

Observe que a única diferença é "altura máxima". isso permitirá que o widget seja redimensionado para uma altura menor, mas não superior a 200 px


4
Por causa da sua solução. Mesmo sendo válido, estamos discutindo as soluções jQuery. Oferecer uma solução CSS para um programador não é uma boa idéia quando o problema pode ser resolvido no jQuery. E no final, isso é apenas mascarar os resultados, não resolvendo o problema, como na resposta aceita. Aqui está!
Adrian P.

3
@ SamBattat Usar css para um problema de programação é um truque horrível. Imagine tentar depurar isso!
Christian Payne

19

Adicionando a resposta de Andrew , você pode até introduzir uma maxResultspropriedade e usá-la desta maneira:

$("#auto").autocomplete({ 
    maxResults: 10,
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    }
});

jsFiddle: http://jsfiddle.net/vqwBP/877/

Isso deve ajudar na legibilidade e manutenção do código!


10

aqui está o que eu usei

.ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden;}

O estouro é automático para que a barra de rolagem não seja exibida quando não deveria.


5

Eu poderia resolver esse problema adicionando o seguinte conteúdo ao meu arquivo CSS:

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

Por favor, não adicione "obrigado" como respostas. Na verdade, eles não fornecem uma resposta para a pergunta e podem ser percebidos como ruído pelos futuros visitantes. Em vez disso, as respostas upvote que você gosta. Dessa forma, os futuros visitantes da pergunta terão uma contagem mais alta de votos nessa resposta e o respondente também será recompensado com pontos de reputação. Veja Por que a votação é importante .
JPS

isto é exatamente o que eu estava procurando! não limitando o número de resultados, mas o número de itens shwn! thx
Serge insas 12/12

Por que essa resposta tem tão poucos votos positivos? Tem alguma coisa errada com isto? Trabalhou para mim, pelo menos à primeira vista.
Szybki 28/05/19

3

Se os resultados vierem de uma consulta mysql, é mais eficiente limitar diretamente o resultado mysql:

select [...] from [...] order by [...] limit 0,10

onde 10 é o número máximo de linhas que você deseja


1
Não é bom consultar um banco de dados a cada mouse! Pode ser lento em alguns servidores ou em um banco de dados enorme. A propósito, não votei, mas escrevi esta explicação. O que as pessoas devem fazer quando votam para baixo. Obrigado.
Adrian P.

2

Fiz da seguinte maneira:

success: function (result) {
response($.map(result.d.slice(0,10), function (item) {
return {
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo
}
}
));

2

O jQuery permite alterar as configurações padrão quando você está anexando o preenchimento automático a uma entrada:

$('#autocomplete-form').autocomplete({
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item){
      //whatever that has to be done when clicked on the item
   }
});


2

Eu tentei todas as soluções acima, mas a minha só funcionou dessa maneira:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},


0

No meu caso, isso funciona bem:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.