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

126

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?

santhosh
la source
11
Il n'y a pas d'option appelée maxen saisie semi
Jayantha Lal Sirisena

Réponses:

272

Voici la documentation appropriée pour le widget jQueryUI . Il n'y a pas de paramètre intégré pour limiter les résultats maximum, mais vous pouvez l'accomplir 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 sourceparamètre puis appeler slicele tableau filtré.

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

Andrew Whitaker
la source
7
Fonctionne comme un charme. Est-ce très utile si votre liste de saisie semi-automatique est très longue (~ 10k résultats) et ralentit le rendu html.
Benjamin Crouzier
Merci beaucoup pour cela! Maintenant, je peux laisser les utilisateurs avoir une liste massive dans localStorage, mais le site Web semble vraiment rapide! Charmant! : D merci beaucoup pour ça! : D tellement heureux que je suis arrivé à trouver cette solution ^ __ ^
Alisso
et si l'on a deux cases de saisie semi-automatique sur la même page? Quand je fais la tranche de réponse sur les deux, les deux arrêtent du tout de trancher: /
Alisso
+1 pour cette solution. J'ajouterai minLength: 3 pour affiner davantage les résultats. jsfiddle.net/vqwBP/295
Adrian P.
2
Dans jsFiddle la solution fournie, changez la valeur de la tranche de 10 à 3 puis dans la zone de saisie, entrez le caractère C. vous ne recevrez que 3 valeurs qui à un utilisateur final pourraient les amener à croire que ce sont les trois seules valeurs disponibles et ne peut pas continuer à saisir des caractères. Tout ce que je suggère est de fournir un bon texte d'aide pour accompagner cette solution (par exemple, seuls les XX premiers résultats correspondants seront affichés. Continuez à taper pour affiner les résultats. "Quelque chose dans ce sens.
HPWD
45

Vous pouvez définir l' minlengthoption sur une grande valeur ou vous pouvez le faire par css comme ceci,

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
Jayantha Lal Sirisena
la source
Génie. J'adore la simplicité de cela et cela laisse l'utilisateur décider.
denislexic
18
C'est assez piraté. Si vous avez une très longue liste et que la saisie semi-automatique renvoie des milliers de matchs, ce sera sanglant lentement ...
Vajk Hermecz
1
D'accord avec Vajk. C'est une mauvaise solution du point de vue de l'évolutivité.
Kiksy
4
D'accord avec Vajk. Ne jouez pas avec CSS lorsque le jeu est en JS.
Adrian P.
J'ai fait la même chose dans mon application dictionnaire. C'est digne!
Moxet
25

Idem que "Jayantha" a dit que l'utilisation de css serait l'approche la plus simple, mais cela pourrait être mieux,

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

Notez que la seule différence est "max-height". cela permettra au widget de se redimensionner à une hauteur plus petite mais pas plus de 200 px

Sam Battat
la source
4
En raison de votre solution. Même s'il est valide, nous discutons des solutions jQuery. Offrir une solution CSS à un programmeur n'est pas une bonne idée lorsque le problème peut être résolu dans jQuery. Et à la fin, cela ne fait que masquer les résultats ne résolvant pas le problème comme dans la réponse acceptée. Voici!
Adrian P.
3
@SamBattat Utiliser css pour un problème de programmation est un horrible hack. Imaginez essayer de déboguer ça!
Christian Payne
19

En plus de la réponse d' Andrew , vous pouvez même introduire une maxResultspropriété 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!

Accroc
la source
10

voici ce que j'ai utilisé

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

Le débordement automatique de sorte que la barre de défilement ne s'affiche pas lorsqu'elle n'est pas censée le faire.

Desto
la source
5

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;
}
Sam
la source
Veuillez ne pas ajouter «merci» comme réponse. Ils n'apportent pas de réponse à la question et peuvent être perçus comme du bruit par ses futurs visiteurs. À la place, votez pour les réponses que vous aimez. De cette façon, les futurs visiteurs de la question verront un nombre de votes plus élevé sur cette réponse, et le répondant sera également récompensé par des points de réputation. Voir Pourquoi voter est important .
jps
c'est exactement ce que je cherchais! ne limitant pas le nombre de résultats mais le nombre d'éléments affichés! thx
Serge insas
Pourquoi cette réponse a si peu de votes positifs? Y a-t-il quelque chose qui ne va pas? A travaillé pour moi, du moins à première vue.
Szybki
3

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

la_nutrie
la source
1
Pas bon d'interroger une base de données à chaque souris! Peut être lent sur certains serveurs ou une énorme base de données. Au fait, je n'ai pas voté contre mais j'ai écrit cette explication. Ce que les gens devraient faire lorsqu'ils votent contre. Merci.
Adrian P.
2

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
}
}
));
AH Jamali
la source
2

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
   }
});
myjeeed
la source
2

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

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

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
    };
    }));
},
Tatiana
la source
0

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,
                }
            }
        })
    );
},
tlberio
la source