wake-up-neo.com

Kann die Breite einer jQuery-Autovervollständigungs-Combobox eingestellt werden?

Ich verwende diese jQuery UI-Combobox-Autocomplete-Steuerung aus der Box der jQuery UI-Website:

Mein Problem ist, dass ich mehrere Comboboxen auf einer Seite habe, und ich möchte, dass sie für jede eine unterschiedliche Breite haben.

Ich kann die Breite für ALLE von ihnen ändern, indem Sie dieses CSS hinzufügen:

 .ui-autocomplete-input
 {
     width: 300px;
 }

aber ich kann keinen Weg finden, die Breite nur eines davon zu ändern.

29
leora

Eine einfache

$('.ui-autocomplete-input').css('width','300px')

funktioniert (ich habe es auf der verlinkten Seite mit Firebug versucht), die erste Seite auf der Seite zu ändern.

Sie können so etwas tun:

$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page

Um das Nte zu ändern.

Um ein bestimmtes Merkmal anhand eines Merkmals zu finden, können Sie es auf viele Arten tun.

Suchen Sie nach der ersten "Option" (in diesem Beispiel "asp"):

$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })

Finden Sie es anhand seines "Labels":

$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})

usw...

Ich werde es aktualisieren, wenn Sie wissen, wie Sie Ihre Combobox finden möchten.

EDIT FOR COMMENT

oo, das macht es noch einfacher. Von der Beispielquelle, mit der Sie verlinkt haben, ist der HTML-Code bereits in ein div eingeschlossen:

<div class="ui-widget" id="uniqueID">
    <label>Your preferred programming language: </label>
    <select>
        <option value="a">asp</option>
        <option value="c">c</option>
        <option value="cpp">c++</option>
        <option value="cf">coldfusion</option>
        <option value="g">groovy</option>
        <option value="h">haskell</option>
        <option value="j">Java</option>
        <option value="js">javascript</option>
        <option value="p1">Perl</option>
        <option value="p2">php</option>
        <option value="p3">python</option>
        <option value="r">Ruby</option>
        <option value="s">scala</option>
    </select>
</div>

Ich würde diesem Div dann eine eindeutige ID geben:

$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')

Das wählt untergeordnete Elemente Ihres div aus, die Eingaben mit der Klasse "ui-autocomplete-input" sind.

34
Mark

Beachten Sie, dass ich den Code in http://jqueryui.com/demos/autocomplete/#combobox verwende.

Fügen Sie in der _create-Methode folgende Zeile hinzu:

    _create: function() {
        var self = this;
        var eleCSS = this.element[0].className; //This line

Dann scrollen Sie ein wenig runter, finden Sie folgendes:

    .addClass("ui-widget ui-widget-content ui-corner-left");

Und ändere das zu:

    .addClass("ui-widget ui-widget-content ui-corner-left "+ eleCSS);

HTML

<select class="combo-1 autocomplete">
    <option value="a">asp</option>
    <option value="c">c</option>
    <option value="cpp">c++</option>
    <option value="cf">coldfusion</option>
    <option value="g">groovy</option>
    <option value="h">haskell</option>
    <option value="j">Java</option>
</select>

Jetzt können Sie CSS auf combo-1 anwenden:

<script>
    $(function() {
        $('.autocomplete').combobox();
        $('.combo-1').css('width', '50px');
    });
</script>
5
Puaka

Mühe dich nicht mit JavaScript. Sie können dies problemlos in CSS tun, wie Sie es ursprünglich versucht haben. Alles, was Sie tun müssen, ist, jedem eine eigene Auswahl hinzuzufügen. Zum Beispiel:

HTML würde so aussehen

<div class="title">
    <label for="title">Title: </label>
    <input id="title">
</div>
<div class="tags">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

CSS würde so aussehen

.ui-autocomplete-input
{ 
    width: 120px;
}
.title .ui-autocomplete-input
{ 
    width: 200px;
}
.tags .ui-autocomplete-input
{ 
    width: 600px;
}
5
Banzor

Ich verwende das Folgende, das grundsätzlich eine der leicht verfügbaren Widget-Init-Funktionen ist und möglicherweise auch das ist, wonach Sie suchen. Ich habe nur zwei einfache Zeilen hinzugefügt, um dies zu erreichen

$(function(){
$.widget( "ui.combobox", {
    _create: function() {
        var self = this,
        select = this.element.hide(),
        selected = select.children( ":selected" ),
        value = selected.val() ? selected.text() : "";
        var getwid = this.element.width(); // <<<<<<<<<<<< HERE
        var input = this.input = blah blah
        .insertAfter( select )
        .val( value )
        .autocomplete({
            delay: 0,
            minLength: 0,
            source: function( request, response ) {
                blah blah
            },
            blah blah
        })
        //?? .addClass( "ui-widget ui-widget-content ui-corner-left" );
        input.width(getwid); // <<<<<<<<<<<< AND HERE
        input.data( "autocomplete" )._renderItem = function( ul, item ) {
            blah blah

Beachten Sie die Zeilen var getwid etc und input.width (getwid);

Ich habe daran gearbeitet, die Breite der Auswahlobjekte zu kopieren und auf die Kombinationsfelder anzuwenden, während diese (die Comboboxen mit automatischer Vervollständigung) erstellt werden, um die Auswahleingaben zu überlagern. 

Hoffentlich hilft das. Grüße.

PS: Ich glaube, wenn Sie wirklich nur feste Breiten anwenden möchten, die nicht auf die zugrunde liegende Auswahlliste verweisen, ignorieren Sie die erste hinzugefügte Zeile und ändern Sie die zweite, um ein vordefiniertes Array mit der "this" -ID zu vergleichen.

5
Wombat_RW

JavaScript

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.addClass('myautocomplete');

CSS

.myautocomplete{width:300px!important;}

Sie können die width nicht direkt setzen, da sie überschrieben wird. Sie können den min-width jedoch direkt einstellen.

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.css('min-width', '300px');
5
Joyce Babu

Ich denke, der einfachste Weg, dies zu tun, besteht darin, das offene Ereignis einzufangen und dort die Breite festzulegen:

$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
  var width = 300;
  $(".ui-autocomplete.ui-menu").width(300);
});

Da nur ein Autocomplete-Menü gleichzeitig aktiv sein kann, können Sie einfach die Breite der Menüklasse ändern.

3
Charles Chan

Sie können immer eine tatsächliche CSS-Regel in Ihrem Dokument festlegen, die der Klasse entspricht.

.ui-autocomplete-input
{ 
    width: 300px;
}

wenn Sie im Voraus wissen, wie breit es sein muss.

1
Geoff
$.widget( "custom.myAutoComplete", $.ui.autocomplete, {
    options: {
        resultClass: "leanSolutions",
    },

    _create: function()
    {
        this._super();
    },`

    _renderMenu: function(ul, items)
    {
        var that = this;
        ul.addClass(that.options.resultClass);

        $.each( items, function( index, item ) {
            that._renderItemData( ul, item );
        });
    }
});

Jetzt können Sie das tun:

$('.myAutoCompleteBox').myAutoComplete(
 data: ...
 etc: ...
 resultClass: 'myAutoCompleteBoxResultList'
);

Und dann kannst du es gestalten

.myAutoCompleteBoxResultList{   
    width: 8000px;
}
1
cinatic

Mit einer kleinen Änderung am jQuery UI code können Sie der .autocomplete () - Funktion eine Breite hinzufügen.

Wenn Sie die offizielle jQuery-UI-Autovervollständigung verwenden (ich bin am 1.8.16) und die Breite manuell definieren möchten.

Wenn Sie die reduzierte Version verwenden (wenn nicht, suchen Sie sie anhand des entsprechenden _resizeMenu), suchen Sie ...

_resizeMenu:function(){var a = this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(), this.element.outerWidth()))}

... und ersetze es durch (add this.options.width || vor Math.max) ...

_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 width-Wert in die Funktion .autocomplete ({width: 200}) einschließen, die von jQuery berücksichtigt wird. Wenn nicht, wird es standardmäßig berechnet.

0
Harry B

Stellen Sie die maximale Breite anstelle der Breite ein, da die Breite jederzeit durch das Plugin überschrieben werden kann.

.ui-autocomplete-input
{ 
    max-width: 300px;/* you can set by percentage too */
}
0
Arfan Mirza

Um eine vollständige Kontrolle über die Autocomplete-Combobox .__ zu haben, stellen Sie die Breite automatisch ein und geben Sie ihr eine ID wie "a_mycomboID".

Ändern Sie diese Zeile 

input = $( "<input>" )

Zu

input = $( "<input id=a_"+select.attr('id')+" style='width:"+select.width()+"px;'>" )

Dadurch wird automatisch die Breite festgelegt und eine ID wie a_[the id of the combo box] zugewiesen. Auf diese Weise können Sie das Verhalten mithilfe der ID steuern.

Arbeitsbeispiel

0
$input.data('ui-autocomplete')._resizeMenu = function () {
    var ul = this.menu.element;
    ul.outerWidth(this.element.outerWidth()); 
 }

Wenn Sie in Ihrem eigenen Widget arbeiten, können Sie so etwas tun

        // Fix width of the menu
        this.input = <your dom element where you bind autocomplete>;
        this.input.data("ui-autocomplete")._resizeMenu = function () {
            var ul = this.menu.element;
            ul.outerWidth(this.element.outerWidth())
        }
0

Verwenden Sie einfach die jQuery-CSS-Methode:

css("width", "300px");

http://api.jquery.com/css/#css2

Sie können dies anfügen, nachdem Sie Ihre Combobox hinzugefügt haben.

Wie verwenden Sie die Combobox in Ihrem Code?

0
echox