Hinzufügen von Rollbalken zu jQuery-autocomplete mit JavaScript

http://jqueryui.com/autocomplete/#maxheight zeigt, wie durch hinzufügen einer Bildlaufleiste zu einer jQueryUI AutoVervollständigen. Es funktioniert wie beworben, jedoch, es ist schwierig zu verwalten, wenn mehrere autocomplete-widgets verwendet werden, die unterschiedliche Höhe der Anforderungen. Für meinen Fall habe ich die verschiedenen Dialoge benutzt werden (alle mit einer zugehörigen Höhe) und haben die autocomplete-widgets in das Dialogfeld.

Beim konfigurieren der autocomplete (d.h. $( "#tags" ).autocomplete({source: availableTags, ...});), konnte der Bildlaufleiste und der zugehörigen Höhe Hinzugefügt werden? Könnte es so geschehen sein, wo die Höhe der Einstellung des übergeordneten Elements (d.h. im dialog)?

InformationsquelleAutor user1032531 | 2015-02-23

Einfache Weise zu ändern, die autocomplete-widget hinzufügen einer css-Klasse auf das widget
hier ist der css -

.fixedHeight {
    color:red;
    font-size:10px;
    max-height: 150px;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: auto;
}

nach dem erstellen autocomplete in Ihrem js fügen Sie die fixedHeight Klasse wie diese

$( "#courses" ).autocomplete({
//load autocomplete options
});

$( "#courses" ).autocomplete("widget").addClass("fixedHeight");

überprüfen Sie diese arbeiten Beispiel

Dieser arbeitete. Dank

InformationsquelleAutor Srinivas Rampelli

0

Müssen Sie die Klasse mit dem Namen .auto-complete im jquery-ui.css. Dort können Sie hinzufügen, min-height und max-height die Korrektur der Höhe minimale Höhe und maximale Höhe von der AutoVervollständigen-Feld. Probieren Sie es aus.
- das ist wahr, aber es scheint, dass Sie sind auf der Suche unterschiedliche Max für jedes pop-up dieser Ansatz würde sich ändern, den max für alle wäre es nicht? Denke auch, es ist besser, eine andere hinzufügen .css-Datei und überschreiben, so dass mit nuget update der jQuery-css-Datei werden nicht übersprungen
- Ja, es wird. Dann wieder, müssen Sie jedes `auto-complete' eindeutig und weisen Höhen für Sie
InformationsquelleAutor Harsha KN

Mit $("#tags2").autocomplete("widget").addClass('fixed-height'); können Sie eine Höhe Klasse, um das autocomplete-widget.
Wenn Sie möchten, legen Sie eine Globale max-height könnte man das überschreiben der css-Klasse .ui-autocomplete.

Finden Sie in der folgenden demo für einige Möglichkeiten, um die Höhe zu ändern, aber ich denke, das beste wird sein, addClass. (Finden Sie die Geige mit dem gleichen code hier)

JS:

$(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"];
    $("#tags").autocomplete({
        source: availableTags
    });

     $("#tags2").autocomplete({
        source: availableTags
    });
    
    $("#tags3").autocomplete({
        source: availableTags
    });
    
    $("#tags2").autocomplete("widget").addClass('fixed-height');
   $("#tags3").autocomplete("widget").attr('style', 'max-height: 400px; overflow-y: auto; overflow-x: hidden;')
});

CSS:

 .ui-autocomplete {
     max-height: 100px;
     overflow-y: auto;
     /* prevent horizontal scrollbar */
     overflow-x: hidden;
 }
 /* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
 * html .ui-autocomplete {
     height: 100px;
 }

.fixed-height {
			padding: 1px;
			max-height: 200px;
			overflow: auto;
		}

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>

<div class="ui-widget">
    <label for="tags">Tags max-height set with class .ui-autocomplete:</label>
    <input id="tags" />
</div>

<div class="ui-widget">
    <label for="tags">Tags max-height set manually with class fixed-height:</label>
    <input id="tags2" />
</div>

<div class="ui-widget">
    <label for="tags">Tags max-height set with jQuery:</label>
    <input id="tags3" />
</div>

aber das scrollen mit den Pfeiltasten nach oben/nach-unten-Taste durch die AutoVervollständigen-Tabelle funktioniert nicht

InformationsquelleAutor AWolf

0

sollten Sie in der Lage sein, die Stütze, um das Element selbst erstellt haben. Die " auto-vervollständigen erhalten Sie den Wert aus der css dann überschreiben mit dem Wert, den Sie festlegen. So etwas wie
```
$( "#tags" ).autocomplete({source: availableTags, ...});
$( "#tags" ).autocomplete("widget").attr("max-height", "5px");
```
^ nicht getestet werden, basteln Sie in ein paar, um ein gutes Beispiel
- Ich mag diese Lösung, allerdings, es gilt das max-height Attribut der input element und nicht die ul element.
- ja nicht bekommen, um zu testen, ob sich das noch. geschrieben, um Sie gehen in eine brauchbare Richtung. Blick auf die Beispiele, die du gepostet es scheint, Sie haben diese arbeiten nun mit dem 3. Beispiel-oder bin ich etwas fehlt?
InformationsquelleAutor workabyte

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.