Ändern der Breite von jquery-ui Autocomplete-Widgets einzeln

Question

Ich arbeite mit mehreren jquery-ui Autocomplete-Widgets auf einer Seite und möchte in der Lage sein, die Breiten von jedem einzeln festzulegen. Derzeit ich es so mache:

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

, die nicht wirklich eine Lösung ist, da der Benutzer verschiedene autocompletes in verschiedenen Aufträge auslösen kann, und dieser Code nur Stile sie auf der Grundlage der Reihenfolge, wie sie hinzugefügt werden zum DOM.

Wenn Autocomplete ausgelöst wird, scheint es, ein <ul> zu erstellen und es dann unter dem Eingabefeld zu positionieren, das es ausgelöst hat. Leider kann ich in diesem generierten <ul> keine eindeutigen Bezeichner finden, an denen ich mich einklinken und etwas CSS anwenden kann.

Mein Problem unterscheidet sich von this one, da ich nur die Standard-Autocomplete und nicht die Autocomplete-Combobox verwenden.

Auch in die Autocomplete <ul> zu graben und verschiedene Autocomplete Boxbreiten mit den Werten in der Liste übereinstimmt funktioniert auch nicht, da die Werte dynamisch generiert werden.

Irgendwelche Ideen?

Answer 1

Ich löste dieses Problem mithilfe des verfügbaren Ereignisses 'open'. Ich brauchte einen Weg, um die Breite zusammen mit anderen Elementen dynamisch festzulegen und wollte kein zusätzliches Markup.

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

Answer 2

Sie können das Eingabefeld, das die automatische Vervollständigung auslöst, in ein div-Element einfügen, dem div-Element eine spezifische ID zuweisen und das auto complete-Element 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 zielen.

<!- 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> 

Answer 3

Ich mag luquis Antwort. Wenn Sie sich jedoch in einer Situation befinden, in der Sie die appendTo-Funktion nicht verwenden können (möglicherweise aufgrund eines Überlaufs usw.), können Sie mithilfe des folgenden Codes sicherstellen, 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

Answer 4

Wenn Sie mehrere Steuerelemente, die die automatische Vervollständigung verwenden, eine einigermaßen elegante Lösung ist die widget an die Steuerung im letzten Moment und ändern ihre CSS angebracht abzurufen:

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

Anzeigen .

Wie oben erwähnt, wird die Breite der Autocomplete-Liste im allerletzten Moment berechnet, daher müssen Sie sie im open-Ereignis ändern.

Answer 5

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

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

Answer 6

verwenden können, wie ich @ Martin Lögdberg Antwort, aber wenn Sie feste Größe Breiten verwenden, anstatt einige ausgefallene Mathematik auf den zurückgegebenen Ergebnissen zu tun, die Breite zu setzen, dann könnte man auch einfach setze die Breite in CSS

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

Answer 7

Eine Verbesserung Martin Lögdberg Antwort. Das funktionierte besser für mich, weil ich viele Textfelder auf der Seite

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

Answer 8

Lesen API hatte, habe ich nur hinzufügen, eine Klasse ui-Front an die div der Eltern meiner Eingang, und das funktioniert fein.

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

Siehe here:

[...] die Eltern des Eingabefeldes wird für eine Klasse von ui-Front überprüft werden. Wenn ein Element mit der UI-Front-Klasse gefunden wird, wird das Menü diesem Element angefügt. Unabhängig vom Wert wird, wenn kein Element gefunden wird, das Menü an den Körper angehängt.

Das angefügte Element bestimmt die Position und Breite des Menüs.

Answer 9

Ab jQuery UI 1.10 wurde das Autocomplete-Widget unter Verwendung der widget factory neu geschrieben. Die automatische Vervollständigung enthält jetzt einen Erweiterungspunkt _resizeMenu, der aufgerufen wird, wenn das Menü vor der Anzeige angepasst wird.

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

Answer 10

Ohne zusätzliche JavaScript-Code zu verwenden, können Sie 1 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 weil width von der JS überschrieben wird, manchmal sogar mit Lösungen, die open: function(event, ui) { ... } verwenden (wie rkever's answer, die in meinem Fall nicht funktionierte). Allerdings wird min-widthnicht überschrieben, so dass es praktisch ist.

Auch, wenn Sie wollen, tun nicht!important verwenden, können Sie detailliert die Regel mit den übrigen Klassen weiter:

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

Diese weitere JS Hacks mich vermieden, hoffe, es hilft!

Answer 11

Ich habe es geschafft, dies mit CSS zu lösen, indem Sie Float zum Autocomplete-Menü hinzufügen.

.ui-autocomplete { float: left; }

Da das Autocomplete-Menü absolute und ein direkter Nachkomme des <body> positioniert. Ich nehme an, dass es seine maximale Breite vom Körper hat, und da es absolute Position ist, kann es nicht als Inline-Block angezeigt werden, um den gesamten verfügbaren Platz zu vermeiden.

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