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?
Antworten:
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.
quelle
_resizeMenu
Funktion? 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.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
appendTo
in 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.
quelle
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.
quelle
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-CSSfloat: left
auf.ui-menu
Elementen festgelegt ist. Bei der Berechnung der Breite wird daherul.width( "" ).outerWidth()
die Breite besonders langer Ergebnisse berücksichtigt, andernfalls wird die Breite desinput
Elements berücksichtigt .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.
quelle
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
quelle
!important
und Bingo Bango, glücklicher Chef. #dontVoteTrump #actuallyMakeAmericaGreatAgainSetze 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 } })
quelle
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" }); },
max-width
.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?
quelle
.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; }
$("#autocompleteID").autocomplete({ source: "http://myhost/magento/js/jquery/ui/php/ville.php", minLength: 1, open: function(event, ui) { $("#autocompleteID").autocomplete ("widget").css("width","300px"); } });
quelle
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.
quelle
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.
quelle
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.quelle
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
quelle
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
size
Eigenschaft 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>
quelle
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.
quelle
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-width
Eigenschaft 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.
quelle
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 });
quelle
if(options.width>0)element.css("width",options.width);
Hiermit wird die Breite der automatischen Vervollständigung festgelegt.Ich habe dies in meiner CSS-Datei, so dass die automatische Vervollständigung die
width
des gestylten übernimmtspan
:span input.ui-autocomplete-input { width: 100%; }
quelle