Beschränken Sie die Ergebnisse auf die automatische Vervollständigung der jQuery-Benutzeroberfläche

126

Ich verwende jQuery UI Autocomplete.

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

Der Parameter max funktioniert nicht und ich erhalte immer noch mehr als 10 Ergebnisse. Vermisse ich etwas

Santhosh
quelle
11
Es gibt keine Option maxin Autocomplete aufgerufen
Jayantha Lal Sirisena

Antworten:

272

Hier ist die richtige Dokumentation für das jQueryUI- Widget. Es gibt keinen integrierten Parameter zum Begrenzen der maximalen Ergebnisse, aber Sie können dies problemlos erreichen:

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

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

Sie können dem sourceParameter eine Funktion zuweisen und dann slicedas gefilterte Array aufrufen .

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/andrewwhitaker/vqwBP/

Andrew Whitaker
quelle
7
Klappt wunderbar. Ist es sehr nützlich, wenn Ihre Autovervollständigungsliste sehr lang ist (~ 10.000 Ergebnisse) und das HTML-Rendering verlangsamt?
Benjamin Crouzier
Vielen Dank dafür! Jetzt kann ich Benutzern eine umfangreiche Liste in localStorage zur Verfügung stellen, aber die Website fühlt sich sehr schnell an! Schön! : D Vielen Dank dafür! : D so glücklich, dass ich diese Lösung gefunden habe ^ __ ^
Alisso
Was ist, wenn zwei Felder für die automatische Vervollständigung auf derselben Seite vorhanden sind? Wenn ich das Antwort-Slice für beide mache, hören die beiden überhaupt auf zu schneiden: /
Alisso
+1 für diese Lösung. Ich werde minLength: 3 hinzufügen, um die Ergebnisse einzugrenzen. jsfiddle.net/vqwBP/295
Adrian P.
2
Ändern Sie in der bereitgestellten jsFiddle-Lösung den Slice-Wert von 10 auf 3 und geben Sie dann im Eingabefeld das Zeichen C ein. Sie erhalten nur 3 Werte, die für einen Endbenutzer zu der Annahme führen können, dass dies die einzigen drei verfügbaren Werte sind und möglicherweise nicht weiter Zeichen eingeben. Ich
schlage
45

Sie können die minlengthOption auf einen großen Wert setzen oder dies per CSS wie folgt tun:

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
Jayantha Lal Sirisena
quelle
Genius. Ich liebe die Einfachheit und es lässt den Benutzer entscheiden.
denislexic
18
Das ist ziemlich hackig. Wenn Sie eine wirklich lange Liste haben und die automatische Vervollständigung Tausende von Übereinstimmungen zurückgibt, wird es blutig langsam sein ...
Vajk Hermecz
1
Stimmen Sie mit Vajk überein. Dies ist unter dem Gesichtspunkt der Skalierbarkeit eine schlechte Lösung.
Kiksy
4
Stimmen Sie mit Vajk überein. Spielen Sie nicht mit CSS, wenn sich das Spiel in JS befindet.
Adrian P.
Ich habe dasselbe in meiner Wörterbuchanwendung gemacht. Es ist würdig!
Moxet
25

Genauso wie "Jayantha" sagte, dass die Verwendung von CSS der einfachste Ansatz wäre, aber dies könnte besser sein,

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

Beachten Sie, dass der einzige Unterschied "maximale Höhe" ist. Dadurch kann das Widget die Größe auf eine kleinere Höhe, jedoch nicht mehr als 200 Pixel ändern

Sam Battat
quelle
4
Wegen deiner Lösung. Auch wenn es sich um eine gültige handelt, diskutieren wir über jQuery-Lösungen. Es ist keine gute Idee, einem Programmierer eine CSS-Lösung anzubieten, wenn das Problem in jQuery gelöst werden kann. Und am Ende maskiert dies nur die Ergebnisse und löst das Problem nicht wie in der akzeptierten Antwort. Bitte schön!
Adrian P.
3
@SamBattat Die Verwendung von CSS für ein Programmierproblem ist ein schrecklicher Hack. Stellen Sie sich vor, Sie versuchen das zu debuggen!
Christian Payne
19

Zusätzlich zu Andrews Antwort können Sie sogar eine Eigenschaft einführenmaxResults und folgendermaßen verwenden:

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

Dies sollte die Lesbarkeit und Wartbarkeit des Codes verbessern!

Haken
quelle
10

Hier ist was ich benutzt habe

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

Der Überlauf wird automatisch angezeigt, sodass die Bildlaufleiste nicht angezeigt wird, wenn dies nicht beabsichtigt ist.

Desto
quelle
5

Ich könnte dieses Problem lösen, indem ich meiner CSS-Datei den folgenden Inhalt hinzufüge:

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
Sam
quelle
Bitte fügen Sie nicht "Danke" als Antwort hinzu. Sie geben keine Antwort auf die Frage und können von den zukünftigen Besuchern als Lärm wahrgenommen werden. Stimmen Sie stattdessen Antworten ab, die Ihnen gefallen. Auf diese Weise erhalten zukünftige Besucher der Frage eine höhere Stimmenzahl für diese Antwort, und der Antwortende wird auch mit Reputationspunkten belohnt. Siehe Warum Abstimmung wichtig .
JPS
das ist genau das, wonach ich gesucht habe! nicht die Anzahl der Ergebnisse begrenzen, sondern die Anzahl der Shwn-Artikel! thx
Serge insas
Warum hat diese Antwort so wenig positive Stimmen? Stimmt etwas nicht? Arbeitete für mich, zumindest auf den ersten Blick.
Szybki
3

Wenn die Ergebnisse aus einer MySQL-Abfrage stammen, ist es effizienter, das MySQL-Ergebnis direkt einzuschränken:

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

Dabei ist 10 die maximale Anzahl von Zeilen, die Sie möchten

the_nutria
quelle
1
Es ist nicht gut, bei jeder Maus eine DB abzufragen! Kann auf einigen Servern oder in großen Datenbanken langsam sein. Übrigens habe ich nicht abgestimmt, sondern diese Erklärung geschrieben. Was Menschen tun sollten, wenn sie abstimmen. Vielen Dank.
Adrian P.
2

Ich habe es folgendermaßen gemacht:

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
quelle
2

Mit jQuery können Sie die Standardeinstellungen ändern, wenn Sie eine automatische Vervollständigung an eine Eingabe anhängen:

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

Plugin: jquery-ui-autocomplete-scroll mit scroller und limit ergebnisse sind wunderschön

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

Ich habe alle oben genannten Lösungen ausprobiert, aber meine haben nur auf diese Weise funktioniert:

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

In meinem Fall funktioniert das gut:

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