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

Ich habe ein Feld für die automatische Vervollständigung der jQuery-Benutzeroberfläche implementiert. Anstatt die Breite des Textfelds zu bestimmen, werden die Dropdown-Optionen erweitert, um die verbleibende Breite der Seite auszufüllen.

Schauen Sie sich dieses Beispiel an, um es selbst zu sehen: http://jsbin.com/ojoxa4

Ich habe versucht, die Breite der Liste unmittelbar nach dem Erstellen so einzustellen:

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

Dies scheint nichts zu tun.

Ich habe auch versucht, die Breite mithilfe von On-Page-Stilen 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 einzustellen? Oder besser, kann jemand erklären, warum die Breiten für mich nicht richtig funktionieren?

Ich benutze diese 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.

Es stellt sich heraus, dass das Menü erweitert wird, um die Breite des übergeordneten Elements zu füllen, das standardmäßig der Hauptteil ist. Dies kann korrigiert werden, indem ein enthaltendes Element mit der richtigen Breite angegeben wird.

Zuerst habe ich so etwas hinzugefügt <div>:

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

Durch die absolute Positionierung kann ich die <div>unmittelbar nach der Eingabe platzieren, ohne den Dokumentenfluss zu unterbrechen.

Wenn ich dann die automatische Vervollständigung aufrufe, gebe ich appendToin den Optionen ein Argument an, wodurch das Menü an mein angehängt wird <div>, und erbe somit seine Breite:

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

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

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

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

Ich bin nicht sicher, was ul.width ("") tun soll, aber ui.width (""). OutWidth () gibt immer die Breite des Körpers zurück, da genau daran die ul angehängt wird. Daher wird die Breite niemals auf die Elementbreite eingestellt ....

Wie auch immer. Um dies zu beheben, fügen Sie dies einfach 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 will einen reduzierten Testfall für die Fehler sehen , hier ist es.

Ich weiß, dass dies längst beantwortet wurde, aber ich denke, es gibt eine bessere Lösung

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

Es hat gut funktioniert für mich.

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

Setze das CSS im offenen Event!

$('#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
            }
        })

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

Wenn Sie CSS verwenden möchten, versuchen Sie Folgendes:

.ui-widget-content.ui-autocomplete {
    width: 350px;
}

Es funktioniert bei jeder Eingabe der automatischen Vervollständigung.

Wenn Sie die offizielle automatische Vervollständigung von jQuery ui verwenden (ich bin am 1.8.16) und die Breite manuell definieren möchten, können Sie dies tun.

Wenn Sie die minimierte Version verwenden (wenn nicht, suchen Sie manuell, indem Sie _resizeMenu abgleichen), suchen Sie ...

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

... und ersetzen Sie es durch (fügen Sie this.options.width || vor Math.max hinzu) ...

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

... Sie können jetzt einen Breitenwert in die Funktion .autocomplete ({width: 200}) einfügen, und jQuery wird ihn berücksichtigen. Wenn nicht, wird standardmäßig berechnet.

Ich weiß, dass dies längst beantwortet wurde, aber der einfachste Weg, den ich finde, besteht darin, die ID der automatischen Vervollständigung zu verwenden und die Breite auf 100px festzulegen, die Sie aufrufen würden

$('.ui-autocomplete-input#MyId').css('width', '100px');

nachdem Sie Ihren $('#MyId').autocomplete(...);Anruf beendet haben. Auf diese Weise binden Sie nicht die Reihenfolge Ihrer Textfelder für die automatische Vervollständigung in Ihrem DOM an Ihr Skript.

Falls Sie die Breite nicht dynamisch einstellen können und überhaupt nichts funktioniert, versuchen Sie dies einzuschließen

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

entweder in einem verknüpften Blatt oder fest codiert und stellen Sie die Parameter hier ein.

Es hat bei mir funktioniert, nachdem ich alles andere ausprobiert hatte

Nun, Ender. Ich weiß nicht, ob meine Lösung Ihnen helfen kann oder nicht, aber mit Jqueryui remote-with-cache.html hat es funktioniert. Ich habe gerade die sizeEigenschaft in das Textfeld eingegeben.

Bitte beachten Sie den folgenden Code:

<div class="demo">
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="30"/>
    </div>
</div>

Meine Lösung bestand darin, die automatische Vervollständigung an ein div mit einer ID anzuhängen, und sie setzten CSS für diese bestimmte ul:

jQuery / JavaScript:

$("input[name='search-text]").autocomplete({
    appendTo: "#item-search-autocomplete",
    source: ....
});

CSS:

#item-search-autocomplete .ui-autocomplete {
    width: 315px;
}

Klappt wunderbar.

Ich hatte das gleiche Problem und konnte es mithilfe dieses Codes beheben, obwohl es ein kleiner Hit und eine Testversion ist, aber es funktioniert, ich konnte die Breite nicht festlegen, also habe ich beschlossen, die max-widthEigenschaft festzulegen.

  $('.ui-autocomplete').css('margin-left','25%') //center align
  $('.ui-autocomplete').css('max-width','38%') //hit and trial
  $('.ui-autocomplete').css('min-width','38%') //hit and trial

Finden Sie heraus, was für Sie am besten funktioniert. Hoffentlich hilft dies.

Es gibt eine Breitenoption für die automatische Vervollständigung. Ich benutze es für 1.3.2.

$('#mytextbox').autocomplete(url, {  
        width: 280,
        selectFirst: false,
        matchSubset: false,
        minChars: 1,
        extraParams:{myextraparam:myextraparam},
        max: 100
    });

Ich habe dies in meiner CSS-Datei, so dass die automatische Vervollständigung die widthdes gestylten übernimmt span:

 span input.ui-autocomplete-input {
     width: 100%;
 }