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

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

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/

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;}

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

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!

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.

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;
}

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

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
}
}
));

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
   }
});

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

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

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

Es gibt keinen max-Parameter.

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

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