wake-up-neo.net

Ändern der Breite von Jquery-ui-Autovervollständigungs-Widgets einzeln

Ich arbeite mit mehreren JQuery-Ui-Autocomplete-Widgets auf einer Seite und möchte deren Breiten individuell einstellen können. Momentan mache ich das so:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

Was nicht wirklich eine Lösung ist, da der Benutzer verschiedene Autocompletes in verschiedenen Reihenfolgen auslösen kann. Dieser Code formatiert sie einfach anhand der Reihenfolge, in der sie dem DOM hinzugefügt werden.

Wenn Autovervollständigung ausgelöst wird, scheint es, einen <ul> zu erstellen und ihn dann unter dem Eingabefeld zu positionieren, das ihn ausgelöst hat. Leider kann ich in diesem generierten <ul> keine eindeutigen Bezeichner finden, um CSS zu speichern und anzuwenden. 

Mein Problem unterscheidet sich von diesem , da ich nur die Standard-Autovervollständigung und nicht die Autovervollständigungs-Combobox verwende. 

Auch das Suchen in die Autovervollständigung <ul> und das Anpassen unterschiedlicher Breiten der Autovervollständigungsboxen an die Werte in der Liste funktionieren nicht, da die Werte dynamisch generiert werden.

Irgendwelche Ideen?

25
CamelBlues

Ich habe dieses Problem mit dem verfügbaren 'offenen' Ereignis behoben. Ich brauchte eine Möglichkeit, die Breite zusammen mit anderen Elementen dynamisch einzustellen, und wollte keine zusätzlichen Markierungen.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});
48
rkever

Ich mag die Antwort von Luqui. Wenn Sie sich jedoch in einer Situation befinden, in der Sie die appendTo-Funktion nicht verwenden können (durch ausgeblendeten Überlauf usw.), können Sie den folgenden Code verwenden, um sicherzustellen, dass Sie Änderungen an der richtigen Liste vornehmen. 

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

Ref: http://docs.jquery.com/UI/Autocomplete#method-widget

33

Wenn Sie über mehrere Steuerelemente verfügen, die Autocomplete verwenden, ist es eine ziemlich elegante Lösung, die widget abzurufen, die im letzten Moment an das Steuerelement angehängt ist, und dessen CSS zu ändern:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

Anzeigen Demo .

Wie bereits erwähnt, wird die Breite der Autovervollständigungsliste im letzten Moment berechnet. Daher müssen Sie sie im Ereignis open ändern.

13
Salman A

Sie können ein "ui-menu" -Widget an den <input> mit Autovervollständigung in Bezug auf $('#myinput').data("autocomplete").menu anhängen. So können Sie die Breite ändern

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});
4
Oleg

Ohne zusätzlichen Javascript-Code können Sie eine einfache CSS-Zeile verwenden:

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

Warum funktioniert das mit min-width?

Einfach deshalb, weil width von der JS überschrieben wird, manchmal sogar bei Lösungen, die open: function(event, ui) { ... } verwenden (wie rkevers Antwort , die in meinem Fall nicht funktionierten). min-widthwird jedoch nicht überschrieben, daher ist es praktisch.

Wenn Sie nicht!important verwenden möchten, können Sie die Regel mit den übrigen Klassen genauer beschreiben:

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

Das hat mir weitere JS-Hacks vermieden, hoffe es hilft!

1
Armfoot

Sie können das Eingabefeld, das die automatische Vervollständigung auslöst, in ein div einschließen, dem div eine bestimmte ID zuweisen und dann die automatisch vervollständigte ul an dieses div und nicht an den Hauptteil des Dokuments anhängen. Auf diese Weise können Sie es mit css basierend auf dem div anvisieren.

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script> 
1
scrappedcola

Ich konnte dieses Problem mit CSS lösen, indem ich dem Autocomplete-Menü Float hinzufügte. 

.ui-autocomplete { float: left; }

Da das Autocomplete-Menü absolute und ein direktes untergeordnetes Element von <body> ist. Ich vermute, er erhält seine maximale Breite vom Körper, und da er absolut positioniert ist, kann er nicht als Inline-Block dargestellt werden, um nicht den gesamten verfügbaren Platz zu beanspruchen.

Auch .ui-autocomplete { width: 1%; } scheint zu funktionieren.

0
Trevald

Eine Verbesserung der Antwort von Martin Lögdberg. Dies funktionierte besser für mich, da ich viele Textfelder auf der Seite hatte 

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});
0
Ben Anderson

Ab jQuery UI 1.10 wurde das Widget für die automatische Vervollständigung mit der widget factory neu geschrieben. Als Teil davon enthält die Autovervollständigung jetzt einen Erweiterungspunkt _resizeMenu , der aufgerufen wird, wenn das Menü vor der Anzeige skaliert wird. 

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});
0
saluce

Beim Lesen der API habe ich gerade eine Klasse ui-front zu div des übergeordneten Elements meiner input hinzugefügt, und das funktioniert gut.

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

Siehe hier :

[...] Die Eltern des Eingabefeldes werden auf eine Klasse von .__ geprüft. ui-front. Wenn ein Element mit der Ui-Front-Klasse gefunden wird, das Menü wird an dieses Element angehängt. Unabhängig vom Wert, falls nein Element gefunden wird, wird das Menü an den Körper angehängt.

Das angehängte Element bestimmt die Position und Breite des Menüs.

0
Le Moineau

Ich mag @Martin Lögdbergs Antwort, aber wenn Sie Breiten mit fester Größe verwenden, anstatt etwas ausgefeiltes mathematisches Ergebnis für die zurückgegebenen Ergebnisse zu verwenden, um die Breite festzulegen, können Sie auch die Breite in CSS festlegen

ul .ui-autocomplete {
  width: 50%;
}
0
ants