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

73

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?

Ender
quelle
Die Antwort von @hmoyat weiter unten sollte die akzeptierte Antwort sein.
Kosta Kontos

Antworten:

113

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.

Arnaud Leymet
quelle
3
Dies sollte die akzeptierte Lösung sein - da es am einfachsten und nicht aufdringlichsten ist
Uhr
2
Ich denke, es ist die beste Antwort, da sie für alle JQuery-Autocomplete-Deklarationen gilt, und es ist klar!
Cristiam Mercado
1
Keine Ahnung, was genau dieser Code tut - aber er passt die Autocomplete-Breite "magisch" an die Breite des betreffenden Eingabefelds an. Genau wie es ursprünglich funktionieren sollte, aber unter vielen Umständen nicht.
low_rents
Hey, danke für diese Antwort. Können Sie einen genaueren Einblick in die Funktionsweise des Codes geben, damit ich herausfinden kann, wie die optimale Platzierung dafür ist? Überschreibt es die _resizeMenuFunktion? Ich habe es in ein Skript eingefügt, das einmal auf jeder Seite meiner Webanwendung ausgeführt wird. Haben Sie Vorschläge für eine bessere Platzierung? Vielen Dank.
Theyuv
60

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.

Ender
quelle
3
Ich habe genau das gleiche Problem. Wenn ich mir die Beispiele auf der Jquery-Benutzeroberfläche ansehe und versuche zu replizieren, kann ich nicht erkennen, was ich anders mache. Bin ich es oder ist die "neue" offizielle Autovervollständigung schlechter als Jorns alte?
Madcapnmckay
Ich würde empfehlen, die Option appendTo zu verwenden, auch wenn die Breite kein Problem darstellt. Sie können das Widget mit verschiedenen Stilen und Optionen wiederverwenden und nicht alle am unteren Rand Ihres Dokuments schweben lassen.
Daniel Del Core
Entschuldigung, habe dies abgelehnt, Arnauds Antwort ist einfach viel besser.
David Grenier
1
@ DavidGrenier Ich glaube nicht, dass es fair ist, eine Antwort abzustimmen, weil eine andere Antwort besser ist. Es sei denn, Sie haben einen bestimmten Grund, warum diese Antwort nicht nützlich ist. Ich denke, es ist besser, Ihre Präferenz für die andere Frage zu zeigen, indem Sie sie abstimmen, aber ich bin sicher, dass Sie das bereits getan haben :) stackoverflow.com/help/privileges/vote-down
Biruk Abebe
Dies ist die beste Lösung
Gaurav Chavan
37

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.

madcapnmckay
quelle
Jemand hat es geschlossen ... nicht sicher warum. Ich bekomme dieses Problem immer noch in der neuesten JQuery-Benutzeroberfläche.
Dan Loewenherz
3
Er sagte, dass wir anscheinend bestimmte CSS-Dateien aufnehmen sollten. Es ist nicht dokumentiert und erscheint mir ein wenig albern, da es die Breite basierend auf der Eingabe berechnen könnte, ohne dass externe Stile erforderlich sind.
Madcapnmckay
2
Ich habe mich nur einige Zeit damit beschäftigt und ein paar Dinge gefunden: 1. Der ul.width( "")Aufruf besteht darin, alle expliziten Breiteneinstellungen zu entfernen, die zuvor für das Menüelement vorgenommen wurden. 2. Das CSS muss enthalten sein, damit es ordnungsgemäß funktioniert, da das Basis-CSS float: leftauf .ui-menuElementen festgelegt ist. Bei der Berechnung der Breite wird daher ul.width( "" ).outerWidth()die Breite besonders langer Ergebnisse berücksichtigt, andernfalls wird die Breite des inputElements berücksichtigt .
Phuong LeCong
2
@madcapnmckay Ein noch einfacherer Ansatz wäre, Ihre Technik in einer Drop-In-Art und Weise zu verwenden: stackoverflow.com/a/11845718/346005
Arnaud Leymet
30

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.

obomaye
quelle
1
Sehr schöne Lösung! Vielen Dank!
Liron
Eine gute Lösung, um Eingabeargumente zu akzeptieren. Lesen Sie daher vor der Verwendung das Handbuch - zum Beispiel, wenn Sie eine Funktion schreiben, wenn NICHT EINE automatische Vervollständigung auf einer Seite erfolgt.
user1954544
24

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

Andrius Chamentauskas
quelle
13
Zur Verdeutlichung für andere: .ui-autocomplete {Position: absolut; }
ynkr
3
Das hat bei mir total geklappt. Buchstäblich gehackt in einem !importantund Bingo Bango, glücklicher Chef. #dontVoteTrump #actuallyMakeAmericaGreatAgain
The Dembinski
Diese Antwort sollte viel mehr Stimmen haben. Einige andere Antworten scheinen mir ziemlich hackige Lösungen zu sein.
Breez
21

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
            }
        })
hmoyat
quelle
Ich habe das getan, ich habe die Ergebnisse tatsächlich in ein Div gesetzt und die Position festgelegt. Es funktioniert in anderen Browsern außer der Kompatibilitätsansicht für IE7 und IE9. Warum das? Hier ist, wie ich es gemacht habe appendTo: "#results", open: function(){ var position = $("#results").position(), left = position.left, top = position.top; $("#results > ul").css({left: (left + 15) + "px", top: (top + 30) + "px", width: (206) + "px" }); },
Tsukimoto Mitsumasa
Möglicherweise müssen Sie auch die zurücksetzen max-width.
Christophe Roussy
15

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?

Nick Olsen
quelle
Dies war das Problem für mich - und ich vermute, dass es auch für die meisten Menschen war. Denken Sie alle, dass die jQ-Benutzeroberfläche standardmäßig so kaputt ist? ;)
vemv
3
Oder fügen Sie Ihrem CSS Folgendes hinzu, da dies alles in dieser Datei enthalten ist:.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; }
Christoph Fink
Einige haben es vielleicht vergessen, aber einige sind tatsächlich auf den Fehler / das Problem
gestoßen
3

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

pradip_PRP
quelle
1

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.

Floh
quelle
0

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.

Harry B.
quelle
0

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.

Arviman
quelle
0

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

user489419
quelle
2
Der aussagekräftige Teil der Datei jquery.ui.autocomplete.css, mit der Sie verknüpft haben, ist die Position: absolut, auf die @ andrius-chamentauskas oben hingewiesen hat. Folgendes hat es für mich behoben: .ui-autocomplete {position: absolute; }
ynkr
0

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>
Meng Lengkhim
quelle
0

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.

Eric Belair
quelle
-1

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.

Rakshit Singh
quelle
-2

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
    });
dev4life
quelle
3
Sie müssen ein anderes Plug-In für die automatische Vervollständigung verwenden. jQuery UI hat keine solche Option: jqueryui.com/demos/autocomplete/#options
Ender
1
Eigentlich verwende ich jquery 1.3.2 mit jquery.autocomplete.min.js 1.0.2 . Wenn Sie in der Datei jquery.autocomplete.min.js nach der Breite suchen, wird folgende Zeile angezeigt: if(options.width>0)element.css("width",options.width); Hiermit wird die Breite der automatischen Vervollständigung festgelegt.
Dev4life
-2

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%;
 }
Margit Agerbo Bork
quelle
Beachten Sie, dass Sie nicht genügend Informationen zu Ihrer Implementierung veröffentlichen. Der Autor hat sein eigenes HTML und Ihr Stil entspricht nicht seinen Anforderungen.
Michael Zhavzharov