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

StackOverflow https://stackoverflow.com/questions/2688652

Question

J'utilise ce contrôle autocomplete combobox jQuery UI de la boîte de l'interface utilisateur jQuery site web:

Mon problème est que j'ai plusieurs comboboxes sur une page, et je veux qu'ils aient des largeurs différentes pour chacun.

Je peux modifier la largeur pour chacun d'eux en ajoutant ce CSS: 

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

mais je ne peux pas trouver un moyen de changer la largeur sur un seul d'entre eux.

Était-ce utile?

La solution

Un simple 

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

œuvres (je l'ai essayé sur la page liée à Firebug ) à changer la première sur la page.

Vous pouvez faire quelque chose comme: 

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

Pour modifier une Nième.

Pour un spécifique par une caractéristique, vous pouvez le faire à bien des égards.

Trouvez par la première "option" (dans cet exemple "asp"): 

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

Trouvez par son "label": 

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

etc ...

Je mettrai à jour si vous avez une idée de la façon dont vous voulez trouver votre combobox.

EDIT POUR UN COMMENTAIRE

oo, qui le rend encore plus facile. De la source d'exemple vous avez lié, le code HTML est déjà enveloppé dans 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>

Je donne que div un id unique alors: 

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

qui sélectionne les éléments enfants de votre div qui sont entrées avec une classe de « ui-autocomplete-entrée ».

Autres conseils

Ne vous embêtez pas avec JavaScript. Vous pouvez facilement le faire en CSS que vous essayez de faire à l'origine. Tout ce que vous devez faire est d'ajouter un sélecteur unique pour chacun. Par exemple:

HTML ressemblera à 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 ressemblerait à ceci 

.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 régler directement la width, car il écrasés. Mais vous pouvez définir directement le min-width. 

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

J'utilise le suivant qui est basiquement une des fonctions d'initialisation widget facilement disponibles et peut-être ce que vous cherchez aussi. J'ai ajouté que 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.width (getwid);

J'ai travaillé pour copier la largeur des objets de sélection et de l'appliquer aux zones de liste déroulante comme ils ( la saisie semi-automatique comboboxes ) sont créés pour superposer les entrées de sélection.

L'espoir qui aide. Cordialement.

PS. Je crois que si vous voulez vraiment juste pour appliquer des largeurs fixes ne faisant référence à la liste de sélection sous-jacente ignorer alors la première ligne, j'ai ajouté et changer la seconde pour comparer un tableau prédéfini avec « cette » id

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

Dans la méthode _create, ajoutez cette ligne: 

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

Alors scrolldown un peu, trouver ceci: 

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

Et changer cela: 

    .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 meilleure façon de le faire est de capturer l'événement ouvert puis mis là la largeur: 

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

Comme un seul menu saisie semi-automatique peut être actif à un moment donné, il est normal de changer juste la largeur de 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 );
        });
    }
});

Vous pouvez faire ceci: 

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

Et vous pouvez le dénommer 

.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 combien large, il doit être.

Pour avoir un contrôle total sur la saisie semi-automatique combobox et régler automatiquement la largeur et de lui donner un identifiant comme « a_mycomboID »

modifier cette ligne 

input = $( "<input>" )

Pour 

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

Cette règle automatiquement la largeur, et lui donnera une carte d'identité tels que a_[the id of the combo box]. Cela vous permettra de contrôler le comportement en utilisant l'ID.

exemple de travail

Il suffit d'utiliser la méthode CSS jQuery: 

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

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

Vous pouvez ajouter ceci après l'ajout de votre zone de liste déroulante.

Comment utilisez-vous dans votre combobox code? 

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

Si vous faites dans 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éfinir la largeur maximum au lieu de la largeur, car la largeur est prioritaire par plug-in tout moment .. 

.ui-autocomplete-input
{ 
    max-width: 300px;/* you can set by percentage too */
}
Non affilié à StackOverflow
scroll top