web-dev-qa-db-fra.com

Est-il possible de définir la largeur d'une liste déroulante jQuery autocomplete?

J'utilise ce contrôle de la complétion automatique combobox de l'interface utilisateur jQuery tout-en-un sur le site Web de l'interface utilisateur de jQuery:

Mon problème est que j'ai plusieurs listes déroulantes sur une page et je veux qu'elles aient des largeurs différentes pour chacune.

Je peux changer la largeur pour TOUS en ajoutant ce CSS:

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

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

jquerycomboboxwidthjquery-ui-autocomplete
29
leora

Un simple

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

fonctionne (je l'ai essayé sur la page liée avec Firebug ) pour changer le premier sur la page.

Vous pouvez faire quelque chose comme:

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

Changer le Nième.

Pour en trouver un spécifique par une caractéristique, vous pouvez le faire de différentes manières.

Trouvez-le 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-le 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 liste déroulante.

EDIT POUR COMMENTAIRE

oo, cela rend encore plus facile. À partir de l'exemple de source que vous avez lié, le code HTML est déjà encapsulé 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 donnerais alors à cette div un identifiant unique:

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

Cela sélectionne les éléments enfants de votre div qui sont des entrées avec une classe de "ui-autocomplete-input".

34
Mark

Notez que j'utilise le code dans 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

Ensuite, faites défiler un peu, trouvez ceci:

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

Et changez ceci en:

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

Ne vous embêtez pas avec JavaScript. Vous pouvez facilement le faire en CSS comme vous le vouliez à l’origine. Tout ce que vous avez à faire est d’ajouter un sélecteur unique à chacun d’eux. 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 ressemblerait à ceci

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

J'utilise ce qui suit, qui est à la base une des fonctions d'initialisation de widget facilement disponibles et pourrait être ce que vous recherchez aussi. J'ai ajouté juste 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);

Ceci, j’ai travaillé pour copier la largeur des objets sélectionnés et l’appliquer aux boîtes à options au fur et à mesure que celles-ci (les listes déroulantes à complétion automatique) sont créées pour superposer les entrées sélectionnées. 

J'espère que cela pourra aider. Cordialement.

PS: Je pense que si vous voulez vraiment appliquer des largeurs fixes ne faisant pas 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 "this".

5
Wombat_RW

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 la width directement, car elle sera remplacée. 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');
5
Joyce Babu

Je pense que le moyen le plus simple de le faire est de capturer l'événement open puis de définir la largeur à cet endroit:

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

Etant donné qu'un seul menu de saisie semi-automatique peut être actif à la fois, vous pouvez simplement changer la largeur de la classe de menu.

3
Charles Chan

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 quelle doit être sa largeur.

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

Maintenant vous pouvez faire ceci:

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

Et puis vous pouvez le coiffer

.myAutoCompleteBoxResultList{   
    width: 8000px;
}
1
cinatic

En modifiant légèrement le code jQuery UI , vous pouvez ajouter une largeur à la fonction .autocomplete ().

Si vous utilisez l'auto-complétion officielle de l'interface utilisateur jQuery (je suis sur la version 1.8.16) et souhaitez définir la largeur manuellement.

Si vous utilisez la version abrégée (sinon, recherchez manuellement en faisant correspondre _resizeMenu), recherchez ...

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

... et remplacez-le par (ajoutez this.options.width || avant Math.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 la fonction .autocomplete ({width: 200}) et elle sera honorée par jQuery. Sinon, il le calculera par défaut.

0
Harry B

Définissez la largeur maximale au lieu de la largeur, car celle-ci est remplacée par le plug-in à tout moment.

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

Pour avoir un contrôle total sur la liste déroulante à complétion automatique , Définir automatiquement la largeur et lui donner un ID du type "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 identifiant tel que a_[the id of the combo box]. Cela vous permettra de contrôler le comportement à l'aide de l'ID.

exemple de travail

0
Mohamed Abo Elenen
$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())
        }
0
Premchandra Singh

Utilisez simplement la méthode CSS jQuery:

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

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

Vous pouvez l'ajouter après avoir ajouté votre liste déroulante.

Comment utilisez-vous la liste déroulante dans votre code?

0
echox