Ändern Breite von jquery-ui zur automatischen Vervollständigung Widgets individuell

Question

Ich arbeite mit mutiple jquery-ui zum automatischen Vervollständigung Widgets auf einer Seite und will in der Lage individuell die Breite eines jeden zu setzen. Derzeit bin ich es, wie dies zu tun:

$($('.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 in der Lage ist, verschiedenes autocompletes in verschiedenen Reihenfolgen auslösen, und dieser Code nur Stile sie auf der Grundlage der Reihenfolge, wie sie auf das DOM hinzugefügt werden.

Wenn die automatische Vervollständigung ausgelöst wird, scheint es ein <ul> zu erstellen und es dann unter dem Eingabefeld positionieren, die es ausgelöst hat. Leider kann ich keine eindeutigen Kennungen in diesem erzeugten <ul> finden andocken und einige CSS anwenden.

Mein Problem ist, unterscheidet sich von dieses , da ich nur die Standard zur automatischen Vervollständigung, und nicht die der automatischen Vervollständigung-Combobox bin mit.

Auch in der Autocomplete <ul> Graben und verschiedene Autocomplete-Box Breiten mit den Werten in der Liste passender entweder nicht funktioniert, da die Werte dynamisch erzeugt werden.

Irgendwelche Ideen?

Answer 1

beschloß ich dieses Problem mit der ‚offenen‘ Veranstaltung. Ich brauchte einen Weg, um dynamisch die Breite festgelegt, zusammen mit anderen Gegenständen und wollte nicht zusätzliches Markup.

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

Answer 2

Ich mag die Antwort von luqui. Aber wenn Sie in einer Situation, wo Sie nicht die appendTo Funktion verwenden können (könnte darauf zurückzuführen sein, etc. Überlauf versteckt), können Sie den Code verwenden unten, um sicherzustellen, dass Sie Änderungen an der richtigen Liste machen.

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

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

Answer 3

Wenn Sie mehrere Steuerelemente haben, dass die Verwendung der automatischen Vervollständigung, eine einigermaßen elegante Lösung ist die widget abrufen an die Steuerung im letzten Moment und ändert ihre CSS:

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

Demo .

Wie oben erwähnt, ist die Breite der Autovervollständigen-Liste wird im allerletzten Moment berechnet daher müssen Sie es in der ändern open Ereignis.

Answer 4

Sie können „ui-Menü“ get-Widget zum <input> mit dem automatischen Vervollständigung angebracht bezüglich der $('#myinput').data("autocomplete").menu. So die Breite ändern können Sie

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

Answer 5

Sie können das Eingabefeld wickeln, die die automatische Vervollständigung in einem div auslöst, der div eine bestimmte ID geben, und dann fügen Sie das Auto-Vervollständigen-ul in diesem div anstatt auf den Körper des Dokuments. So können Sie es mit CSS basierend auf dem div ausrichten können.

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

Ohne zusätzlichen JavaScript-Code zu verwenden, können Sie 1 einfache CSS Zeile:

<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

Ganz einfach, weil width wird durch die JS, manchmal sogar mit Lösungen, die Verwendung open: function(event, ui) { ... } überschrieben (wie rkever Antwort , das tat in meinem Fall nicht funktionieren). Allerdings min-width ist nicht überschrieben , so dass es praktisch ist.

Auch wenn Sie tun wollen nicht verwenden !important, können Sie weitere Einzelheiten der Regel mit den übrigen Klassen:

.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 bin ich weiter JS Hacks vermieden, hoffe, es hilft!

Answer 7

Ich mag @ Martin Lögdberg Antwort, aber wenn Sie liebe Größe Breite festgelegt sind unter Verwendung als einige ausgefallene Mathematik auf den zurückgegebenen Ergebnisse zu tun, die Breite zu setzen, dann könnte man auch setzen nur die Breite in CSS

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

Answer 8

Eine Verbesserung Martin Lögdberg Antwort. Das funktionierte besser für mich, weil 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());
      }
   });  
});

Answer 9

Reading API, ich habe nur hinzufügen, eine Klasse ui-Front auf die Eltern div meine input , 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 wird für eine Klasse von überprüft werden    ui-Front . Wenn ein Element mit der ui-Front-Klasse gefunden wird, das Menü   wird an diesem Element angehängt werden . Unabhängig von dem Wert, wenn keine   Element gefunden wird, wird das Menü an den Körper angehängt werden.

Das beigefügte Element die Position und die Breite des Menüs bestimmen.

Answer 10

Wie von jQuery UI 1.10, das den automatischen Vervollständigung Widget neu geschrieben wurde mit der Widget Fabrik . Als Teil davon enthält die automatische Vervollständigung nun einen _resizeMenu Erweiterungspunkt, das, wenn sie aufgerufen wird, das Menü Dimensionierung vor der Anzeige.

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

Answer 11

konnte ich dies mit CSS lösen Schwimmer zum Autovervollständigen-Menü hinzufügen.

.ui-autocomplete { float: left; }

Da die Autocomplete-Menü positioniert absolute und ein direkter Nachkomme des <body>. Ich denke, es ihm die maximale Breite vom Körper bekommt, und da sie die Position absolut kann es nicht als Inline-Block angezeigt werden, um zu vermeiden, dass all den verfügbaren Platz nehmen.

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