wake-up-neo.com

jQuery-UI-Autocomplete-Breite nicht korrekt eingestellt

Ich habe ein Autokomplettierungsfeld für die jQuery-Benutzeroberfläche implementiert. Statt der Breite des Textfelds zu erweitern, erweitern die Dropdown-Optionen die verbleibende Seitenbreite.

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

Ich habe versucht, die Breite der Liste gleich 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 Seitenvorlagen einzustellen:

ui-autocomplete { width: 500px; }

Dies funktioniert zwar erstaunlich, 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 individuell einzustellen? Oder besser, kann jemand erklären, warum die Breiten für mich nicht richtig funktionieren?

66
Ender

Es stellt sich heraus, dass das Problem darin besteht, 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 einschließendes Element mit der richtigen Breite angegeben wird.

Zuerst habe ich einen <div> hinzugefügt:

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

Die absolute Positionierung ermöglicht es mir, den <div> unmittelbar nach der Eingabe zu platzieren, ohne den Dokumentenfluss zu unterbrechen.

Wenn ich dann die Autovervollständigung aufrufe, gebe ich in den Optionen ein appendTo-Argument an, wodurch das Menü an meinen <div> angehängt wird und somit seine Breite erbt:

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

Dies behebt das Problem. Ich wäre jedoch immer noch daran interessiert zu wissen, warum dies notwendig ist und nicht, dass das Plug-In ordnungsgemäß funktioniert.

57
Ender

Ich verwende diese Drop-In-Lösung:

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

Dies ist im Grunde die Lösung von @madcapnmckay , aber die ursprüngliche Quelle muss nicht geändert werden.

99
Arnaud Leymet

Ich hatte einen Dig im Autocomplete-Code und der Schuldige ist dieser kleine Blighter

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

Ich bin nicht sicher, was mit ul.width ("") gemacht werden soll, aber ui.width (""). OutWidth () gibt immer die Breite des Körpers zurück, denn das ist, woran die ul angehängt ist. Daher wird die Breite niemals auf die Elementbreite eingestellt.

Sowieso. Um dies zu beheben, fügen Sie dies einfach in Ihren Code ein

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

Ist das ein Fehler?

BEARBEITEN: Falls jemand einen reduzierten Testfall für den Fehler hier sehen möchte, ist dies der Fall.

37
madcapnmckay

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

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

Es hat gut für mich funktioniert.

22
obomaye

Ich weiß, dass das schon vor langer Zeit beantwortet wurde, aber ich hatte das gleiche Problem. Meine Lösung bestand darin, Position hinzuzufügen: absolut 

22

Setzen Sie die 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
            }
        })
17
hmoyat

Ich traf auch auf dieses Problem, stellte jedoch fest, dass ich gerade vergessen hatte, einen Verweis auf das Stylesheet jquery.ui.autocomplete.css hinzuzufügen. Haben Sie dieses Stylesheet in Ihre Layout-/Masterseite eingefügt?

15
Nick Olsen

$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
} 
});

3
pradip_PRP

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 füge einfach die size-Eigenschaft in das Textfeld ein. 

Bitte sehen Sie den Code unten: 

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

Wenn Sie css verwenden möchten, versuchen Sie folgendes:

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

Es funktioniert bei jeder Autocomplete-Eingabe.

0
Flea

Meine Lösung bestand darin, die Autovervollständigung an ein Div mit einer ID anzuhängen, und sie haben CSS für dieses spezifische ul festgelegt:

jQuery/JavaScript:

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

CSS:

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

Klappt wunderbar.

0
Eric Belair

Falls Sie die Breite nicht dynamisch einstellen können und nichts funktioniert, versuchen Sie, dies einzubeziehen

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 in fest codierter Form und stellen Sie hier die Parameter ein.

Es hat für mich funktioniert, nachdem ich alles andere probiert habe

0
user489419

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 zu setzen, die Sie anrufen würden

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

nachdem Sie Ihren $('#MyId').autocomplete(...);-Aufruf beendet haben. Auf diese Weise wird die Reihenfolge der automatisch vervollständigten Textfelder in Ihrem DOM nicht an Ihr Skript gebunden.

0
arviman

Wenn Sie die offizielle jQuery-UI-Autovervollständigung verwenden (ich bin am 1.8.16) und die Breite manuell definieren möchten, können Sie dies tun.

Wenn Sie die reduzierte Version verwenden (wenn nicht, suchen Sie sie anhand des entsprechenden _resizeMenu), suchen Sie ...

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

... und ersetzen Sie es mit (add.options.width || vor Math.max) ...

_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 width-Wert in die .autocomplete-Funktion ({width: 200}) einschließen, und jQuery berücksichtigt dies. Wenn nicht, wird es standardmäßig berechnet.

0
Harry B