Breite der automatischen Vervollständigung der jQuery-Benutzeroberfläche nicht richtig eingestellt

Question 1

Ich habe ein jQuery-UI-Autocomplete-Feld implementiert, und anstatt die Breite des Textfelds zu sein, werden die Dropdown-Optionen erweitert, um die verbleibende Breite der Seite auszufüllen.

Schauen Sie sich dieses Beispiel an, um sich selbst davon zu überzeugen: http://jsbin.com/ojoxa4

Ich habe versucht, die Breite der Liste unmittelbar nach dem Erstellen wie folgt festzulegen:

$('.ui-autocomplete:last').css('width',
                               $('#currentControlID').width()
                              );

Dies scheint nichts zu tun.

Ich habe auch versucht, die Breite mithilfe von Stilen auf der Seite festzulegen:

ui-autocomplete { width: 500px; }

Das funktioniert erstaunlicherweise, aber es würde bedeuten, dass alle Autovervollständigungen auf einer Seite die gleiche Breite haben müssten, was nicht ideal ist.

Gibt es eine Möglichkeit, die Breite jedes Menüs einzeln festzulegen? Oder besser, kann mir jemand erklären, warum die Breiten bei mir nicht richtig funktionieren?

Question 2

ich benutze das Drop-in-Lösung:

jQuery.ui.autocomplete.prototype._resizeMenu = function () {
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());
}

Das ist im Grunde die Lösung von @madcapnmckay, aber das muss die ursprüngliche Quelle nicht ändern.

Question 3

Es stellt sich heraus, dass das Problem darin besteht, dass das Menü erweitert wird, um die Breite seines übergeordneten Elements auszufüllen, das standardmäßig der Hauptteil ist. Dies kann korrigiert werden, indem man ihm ein enthaltendes Element mit der richtigen Breite gibt.

Zuerst fügte ich a hinzu <div> so:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

Die absolute Positionierung ermöglicht mir die Platzierung <div> unmittelbar nach der Eingabe, ohne den Belegfluss zu unterbrechen.

Wenn ich dann die automatische Vervollständigung aufrufe, gebe ich an an appendTo Argument in den Optionen, wodurch das Menü an my angehängt wird <div>und erben somit seine Breite:

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

Dies behebt das Problem. Es würde mich jedoch immer noch interessieren, warum dies erforderlich ist, anstatt dass das Plug-In ordnungsgemäß funktioniert.

Question 4

Ich weiß, dass dies schon lange beantwortet wurde, aber ich denke, es gibt eine bessere Lösung

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

Es funktionierte gut für mich.

Question 5

Ich habe mich im Autocomplete-Code umgesehen und der Schuldige ist dieser kleine Mistkerl

_resizeMenu: function() {
    var ul = this.menu.element;
    ul.outerWidth( Math.max(
        ul.width( "" ).outerWidth(),
        this.element.outerWidth()
    ) );
},

Ich bin mir nicht sicher, was ul.width(“”) tun soll, aber ui.width(“”).outWidth() gibt immer die Breite des Körpers zurück, weil das ul daran angehängt wird. Daher wird die Breite nie auf die Elementbreite gesetzt….

Wie auch immer. Um dies zu beheben, fügen Sie dies einfach zu Ihrem Code hinzu

$element.data("autocomplete")._resizeMenu = function () {
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());
}

Ist das ein Fehler?

EDIT: Falls jemand einen reduzierten Testfall für den Fehler sehen möchte hier es ist.

Question 6

Ich weiß, dass dies vor langer Zeit beantwortet wurde, aber ich bin auf dasselbe Problem gestoßen. Meine Lösung bestand darin, position:absolute hinzuzufügen

Question 7

Legen Sie das CSS im offenen Ereignis fest!

$('#id').autocomplete({
    minLength: 3,
    source: function(request, response) {
        $.ajax({
                    url: "myurl",
                    dataType: "json",
                    type: 'POST',
                    data: {
                        'q': request.term,

                        'maxRows': 15
                    },
                    success: function(data) {

                        response($.map(data, function(item) {
                            return {
                                label: item.name,
                            }
                        })),
                    }
                })
            },
            select: function(event, ui) {
                $("#id").val(ui.item.label);
            },
            focus: function ( event, ui ){
                $form.find('#id').val(ui.item.label);
                return false;
            },
            open: function(){
                $('.ui-autocomplete').css('width', '300px'); // HERE
            }
        })

Question 8

Ich bin auch auf dieses Problem gestoßen, habe aber festgestellt, dass ich einfach vergessen habe, einen Verweis auf das Stylesheet jquery.ui.autocomplete.css einzufügen. Haben Sie dieses Stylesheet in Ihr Layout/Ihre Musterseite aufgenommen?