E 'possibile impostare la larghezza di un completamento automatico combobox jQuery?

Question

questo controllo di completamento automatico combobox jQuery UI fuori dalla scatola al largo della jQuery UI sito web:

Il mio problema è che ho più comboboxes su una pagina, e voglio loro di avere larghezze differenti per ciascuno di essi.

posso cambiare la larghezza per tutti loro con l'aggiunta di questo CSS:

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

ma non posso capire un modo per modificare la larghezza su una sola di esse.

Answer 1

Un semplice

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

opere (ho provato sulla pagina collegata con Firebug ) a cambiare il primo sulla pagina.

Si può fare qualcosa di simile:

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

Per modificare l'ennesimo.

Per trovare uno specifico da una caratteristica, si potrebbe farlo in molti modi.

Cercare dalla prima "opzione" (in questo esempio "asp"):

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

Cercare per la sua "etichetta":

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

ecc ...

Io aggiornare se avete un'idea di come si vuole trovare il vostro combobox.

Modifica PER IL COMMENTO

oo, che rende ancora più facile. Dalla sorgente ad esempio si è collegato al, il codice HTML è già avvolto in un div:

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

I darebbe che div un ID univoco poi:

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

che gli elementi seleziona figlio di tuo div che sono ingressi con una classe di "ui-completamento automatico-input".

Answer 2

Non perdete tempo con JavaScript. Si può facilmente fare questo in CSS come si erano originariamente cercando di fare. Tutto quello che dovete fare è aggiungere un selettore unico per ciascuno di essi. Ad esempio:

HTML sarebbe simile a questa

<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 sarebbe simile a questa

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

Answer 3

JavaScript

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

CSS

.myautocomplete{width:300px!important;}

Non è possibile impostare il width direttamente, perché sarà sovrascritto. Ma è possibile impostare direttamente la min-width.

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

Answer 4

Io uso il seguente che è fondamentalmente una delle funzioni di widget di init prontamente disponibili e potrebbe essere quello che state cercando troppo. Ho aggiunto solo due linee semplici per realizzarla

$(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

Si notino le linee di var getwid , ecc e input.width (getwid);

Questa ho lavorato fuori per copiare la larghezza degli oggetti selezionati e applicarlo alle caselle combinate come ( il completamento automatico comboboxes ) sono creati per sovrapporre i ingressi di selezione.

La speranza che aiuta. Saluti.

PS:. Credo che se si vuole veramente solo applicare larghezze fisse non fa riferimento alla lista di selezione alla base poi ignorare la prima linea ho aggiunto e cambiare la seconda per confrontare una serie predefinita con il "questo" id

Answer 5

Si noti che io uso il codice http://jqueryui.com/demos/autocomplete/# combobox .

Nel metodo _create, aggiungere questa riga:

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

Poi scrolldown un po ', trovare questo:

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

E cambiare questo:

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

Ora è possibile applicare i CSS per combo-1:

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

Answer 6

Penso che il modo più semplice per farlo è quello di catturare l'evento aperto e quindi impostare la larghezza c'è:

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

Dato che solo un menu di completamento automatico può essere attiva in una sola volta, è bene cambiare solo la larghezza per la classe menu.

Answer 7

$.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 );
        });
    }
});

Ora si può fare questo:

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

E poi si può lo stile che

.myAutoCompleteBoxResultList{   
    width: 8000px;
}

Answer 8

Si può sempre impostare una regola CSS effettivo nel documento in modo che corrisponda alla classe,

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

se si conosce in anticipo la larghezza deve essere.

Answer 9

Per avere un controllo completo sul combobox completamento automatico e impostare automaticamente la larghezza e dare un ID come "a_mycomboID"

modificare questa riga

input = $( "<input>" )

Per

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

Questo imposterà automaticamente la larghezza, e darà un ID come a_[the id of the combo box]. Questo vi permetterà di controllare il comportamento utilizzando l'ID.

esempio di lavoro

Answer 10

È sufficiente utilizzare il metodo di jQuery CSS:

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

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

È possibile aggiungere questo dopo aver aggiunto la tua casella combinata.

Come si usa la casella combinata nel codice?

Answer 11

Con una piccola modifica al codice jQuery UI è possibile aggiungere una larghezza al .autocomplete () la funzione.

Se si utilizza il completamento automatico ufficiale jQuery UI (sono in 1.8.16) e vorrebbe definire la larghezza manualmente.

Se si utilizza la versione minified (se non poi trovare manualmente abbinando _resizeMenu), trovare ...

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

... e sostituirlo con (this.options.width || add prima Math.max) ...

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

È ora possibile includere un valore di larghezza nella .autocomplete ({width: 200}) la funzione e jQuery onoreranno esso. In caso contrario, questo verrà impostato a calcolarla.

Answer 12

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

Se fai dentro il proprio widget, si può fare qualcosa di simile

        // 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())
        }

Answer 13

Impostare la larghezza massima, invece di larghezza, perché la larghezza è di esclusione dal plug-in qualsiasi momento ..

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