web-dev-qa-db-fra.com

Limiter les résultats dans la saisie semi-automatique de l'interface utilisateur jQuery

J'utilise jQuery UI Autocomplete.

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

Le paramètre max ne fonctionne pas et j'obtiens toujours plus de 10 résultats. Est-ce que je manque quelque chose?

jquery-uiautocompletejquery-ui-autocomplete
120
santhosh

Voici le documentation appropriée pour le widget jQueryUI . Il n'y a pas de paramètre intégré pour limiter le maximum de résultats, mais vous pouvez le faire facilement:

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

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

Vous pouvez fournir une fonction au paramètre source, puis appeler slice sur le tableau filtré.

Voici un exemple de travail: http://jsfiddle.net/andrewwhitaker/vqwBP/

260
Andrew Whitaker

Vous pouvez définir l’option minlength sur une grande valeur ou vous pouvez le faire en css comme ceci,

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

Même chose que "Jayantha" a déclaré que l'utilisation de CSS serait l'approche la plus simple, mais que cela pourrait être mieux,

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

Notez que la seule différence est "hauteur maximale". cela permettra au widget de redimensionner à une hauteur inférieure mais pas plus de 200px

23
Sam Battat

En ajoutant la réponse d'Andrew , vous pouvez même introduire une propriété maxResults et l'utiliser de cette façon:

$("#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/

Cela devrait améliorer la lisibilité et la maintenabilité du code!

19
SNag

voici ce que j'ai utilisé

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

Le débordement automatique afin que la barre de défilement ne s'affiche pas quand ce n'est pas censé être.

10
Desto

Je pourrais résoudre ce problème en ajoutant le contenu suivant à mon fichier CSS:

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

Si les résultats proviennent d'une requête mysql, il est plus efficace de limiter directement le résultat mysql:

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

où 10 est le nombre maximum de lignes que vous voulez

3
the_nutria

J'ai essayé toutes les solutions ci-dessus, mais la mienne n'a fonctionné que de cette façon:

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

jQuery vous permet de modifier les paramètres par défaut lorsque vous attachez la saisie semi-automatique à une entrée:

$('#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
myjeeed

Plugin: jquery-ui-autocomplete-scroll avec scroller et limite les résultats sont magnifiques

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});
2
KingRider

Je l'ai fait de la manière suivante:

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
AH Jamali

Dans mon cas, cela fonctionne bien:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},
0
tlberio

Il n'y a pas de paramètre max.

http://docs.jquery.com/UI/Autocomplete

0
dteoh