web-dev-qa-db-fra.com

Modification de la largeur des widgets jquery-ui autocomplete individuellement

Je travaille avec une multitude de widgets j9-jquery-ui autocomplete sur une page et je veux pouvoir définir les largeurs de chacun individuellement. Actuellement, je le fais comme ça:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

Ce qui n’est pas vraiment une solution puisque l’utilisateur est capable de déclencher divers complétements automatiques dans différents ordres et que ce code les style en fonction de l’ordre dans lequel ils ont été ajoutés au DOM.

Lorsque l'auto-complétion est déclenchée, il semble créer un <ul>, puis le positionner sous la zone de saisie qui l'a déclenché. Malheureusement, je ne trouve aucun identifiant unique dans ce <ul> généré auquel s'attacher et appliquer des CSS. 

Mon problème est différent de celui-ci , puisque je n'utilise que la saisie semi-automatique par défaut, et non la liste auto-complète. 

Aussi, creuser dans le <ul> autocomplete et faire correspondre différentes largeurs de boîtes à complétion automatique avec les valeurs de la liste ne fonctionne pas non plus, car les valeurs sont générées de manière dynamique.

Des idées?

jquerycssjquery-uijquery-ui-autocomplete
25
CamelBlues

J'ai résolu ce problème en utilisant l'événement 'open' disponible. J'avais besoin d'un moyen de définir dynamiquement la largeur, avec d'autres éléments, et je ne voulais pas de balisage supplémentaire.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});
48
rkever

J'aime la réponse de Luqui. Mais si vous êtes dans une situation où vous ne pouvez pas utiliser la fonctionnalité appendTo (cela peut être dû à un dépassement de capacité masqué, etc.), vous pouvez utiliser le code ci-dessous pour vous assurer que vous apportez des modifications à la liste correcte. 

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

Ref: http://docs.jquery.com/UI/Autocomplete#method-widget

33
Martin Lögdberg

Si vous avez plusieurs contrôles qui utilisent l'auto-complétion, une solution assez élégante consiste à récupérer le widget attaché au contrôle au dernier moment et à modifier son CSS:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

Afficher Démo .

Comme mentionné ci-dessus, la largeur de la liste de complétion automatique est calculée au tout dernier moment, vous devez donc la modifier dans l'événement open .

13
Salman A

Vous pouvez obtenir un widget "ui-menu" attaché au <input> après avoir complété la saisie semi-automatique avec le respect de $('#myinput').data("autocomplete").menu. Donc, pour changer la largeur, vous pouvez utiliser

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});
4
Oleg

Sans utiliser de code Javascript supplémentaire, vous pouvez utiliser une simple ligne CSS:

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

Alors, pourquoi cela fonctionne-t-il avec min-width?

Tout simplement parce que width est écrasé par le JS, parfois même avec des solutions qui utilisent open: function(event, ui) { ... } (comme la réponse de rkever , qui ne fonctionnait pas dans mon cas). Cependant, min-width _ {n'est pas écrasé}, il est donc pratique.

De plus, si vous faites ne voulez pas utiliser!important, vous pouvez détailler davantage la règle avec les classes restantes:

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

Cela m'a évité d'autres hacks JS, espérons que cela aide!

1
Armfoot

Vous pouvez encapsuler la zone de saisie qui déclenche l'auto-complétion dans une div, donner à la div un identifiant spécifique, puis ajouter le compl-ment ul à cette div plutôt qu'au corps du document. De cette façon, vous pouvez le cibler avec css en fonction de la div.

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script>
1
scrappedcola

J'ai réussi à résoudre ce problème avec CSS en ajoutant float au menu de saisie semi-automatique. 

.ui-autocomplete { float: left; }

Puisque le menu de saisie semi-automatique est positionné sur absolute et un enfant direct du <body>. J'imagine que sa largeur maximale provient du corps, et comme sa position est absolue, il ne peut pas être affiché en bloc afin d'éviter de prendre tout l'espace disponible.

De plus, .ui-autocomplete { width: 1%; } semble fonctionner.

0
Trevald

Une amélioration par rapport à la réponse de Martin Lögdberg. Cela fonctionnait mieux pour moi car j'avais beaucoup de zones de texte sur la page 

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});
0
Ben Anderson

Depuis jQuery UI 1.10, le widget de saisie semi-automatique a été réécrit à l'aide de la fabrique de widgets . Dans ce cadre, la saisie semi-automatique contient désormais un point d'extension _resizeMenu , appelé lors du dimensionnement du menu avant affichage. 

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});
0
saluce

En lisant l'API, je viens d'ajouter une classe ui-front au div du parent de mon input, et cela fonctionne bien.

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

Voir ici :

[...] les parents du champ de saisie seront vérifiés pour une classe de ui-front. Si un élément de la classe ui-front est trouvé, le menu sera ajouté à cet élément. Indépendamment de la valeur, si non Si l’élément est trouvé, le menu sera ajouté au corps.

L'élément ajouté détermine la position et la largeur du menu.

0
Le Moineau

J'aime @Martin Lögdberg répondre, mais si vous utilisez des largeurs de taille fixe plutôt que de faire des calculs compliqués sur les résultats renvoyés pour définir la largeur, vous pouvez également définir la largeur en CSS.

ul .ui-autocomplete {
  width: 50%;
}
0
ants