Est-il possible de régler la largeur d'un combobox jQuery autocomplete?

ne vous embêtez pas avec JavaScript. Vous pouvez facilement le faire dans CSS comme vous essayiez à l'origine de le faire. Tout ce que vous devez faire est d'ajouter une unique sélecteur de chacun. Par exemple:

HTML ressemblerait à ceci

<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 devrait ressembler à cela

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

JavaScript

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

CSS

.myautocomplete{width:300px!important;}

vous ne pouvez pas définir le width directement, parce qu'il sera écrasé. Mais vous pouvez définir le min-width directement.

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

j'utilise ce qui suit qui est fondamentalement l'une des fonctions INIT widget facilement disponibles et pourrait être ce que vous recherchez aussi. J'ai ajouté seulement deux lignes simples pour y parvenir

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

notez les lignes var getwid etc et input.largeur (getwid);

ceci j'ai travaillé dehors pour copier la largeur des objets choisis et l'appliquer aux boîtes de combo comme eux ( l'autocomplete comboboxes ) sont créés pour superposer les entrées select.

Espère que ça aide. Égard.

PS: je crois que si vous voulez vraiment appliquer des largeurs fixes sans faire référence à la liste de sélection sous-jacente, ignorez la première ligne que j'ai ajoutée et changez la seconde pour comparer un tableau prédéfini avec l'id "ceci".

notez que j'utilise le code dans http://jqueryui.com/demos/autocomplete/#combobox .

dans la méthode _create , ajouter cette ligne:

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

puis scrolldown un peu, trouver ceci:

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

et le remplacer par:

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

Maintenant vous pouvez appliquer CSS à combo-1:

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

je pense que la façon la plus facile de le faire est de capturer l'événement ouvert et d'y définir la largeur:

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

Puisqu'un seul menu autocomplete peut être actif à la fois, il est normal de changer la largeur pour la classe de menu.

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

Maintenant vous pouvez faire ceci:

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

et puis vous pouvez le style

.myAutoCompleteBoxResultList{   
    width: 8000px;
}

vous pouvez toujours définir une règle CSS réelle dans votre document pour correspondre à la classe,

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

si vous savez à l'avance comment elle doit être.

pour avoir un contrôle complet sur le combobox autocomplete et définissez la largeur automatiquement et donnez-lui un ID comme" a_mycomboid "

changer cette ligne

input = $( "<input>" )

à

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

cela définira automatiquement la largeur, et lui donnera un ID tel que a_[the id of the combo box] . Cela vous permettra de contrôler le comportement en utilisant L'ID.

exemple pratique

utilisez simplement la méthode jQuery CSS:

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

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

vous pouvez ajouter cela après avoir ajouté votre combobox.

comment utilisez-vous le combobox dans votre code?

avec un petit changement au code jQuery UI vous pouvez ajouter une largeur à la .la saisie semi-automatique() fonction.

si vous utilisez le jQuery UI officiel autocomplete (je suis sur 1.8.16) et que vous souhaitez définir la largeur manuellement.

si vous utilisez la version miniifiée (si ce n'est pas trouvé manuellement en faisant correspondre _resizeMenu), trouver...

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

...et le remplacer par (ajouter this.options.width || avant Mathématique.Max. )..

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

vous pouvez maintenant inclure une valeur de largeur dans le .fonction autocomplete ({width: 200}) et jQuery l'honorera. Si non, il sera par défaut à la calculer.

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

si vous faites à l'intérieur de votre propre widget, vous pouvez faire quelque chose comme

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

définit la largeur maximale au lieu de la largeur, parce que la largeur est outrepassée par le plugin à tout moment..

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