Changement de largeur de widgets autocomplete jquery-ui individuellement

Question

Je travaille avec mutiple widgets autocomplete jquery-ui sur une page et que vous voulez être en mesure de régler les largeurs de chacun individuellement. À l'heure actuelle, je le fais comme ceci:

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

Ce qui est pas vraiment une solution car l'utilisateur est en mesure de déclencher diverses autocompletes dans des ordres différents, et ce code seulement les styles en fonction de leur ordre, ils sont ajoutés au DOM.

Lorsque autocomplete est déclenché, il semble créer un <ul> puis le placer sous la zone d'entrée qui a déclenché. Malheureusement, je ne peux pas trouver des identificateurs uniques dans ce produit <ul> pour verrouiller et à appliquer un CSS.

Ma question est différente de celui-ci , depuis que je suis en utilisant seulement la saisie semi-automatique par défaut, et non la saisie semi-automatique-combobox.

De même, en creusant dans le <ul> de remplissage automatique et correspondant à différentes largeurs de la boîte de remplissage automatique avec les valeurs à l'intérieur de la liste ne fonctionne pas non plus, puisque les valeurs sont générées dynamiquement.

Toutes les idées?

Answer 1

Je résolu ce problème en utilisant l'événement « ouvert » disponible. Il me fallait un moyen de définir dynamiquement la largeur, ainsi que d'autres éléments et ne voulait pas le balisage supplémentaire.

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

Answer 2

J'aime la réponse de Luqui. Mais si vous êtes dans une situation où vous ne pouvez pas utiliser la fonction appendTo (pourrait être due à débordement, etc. caché), 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 de

Answer 3

Si vous avez plusieurs contrôles qui autocomplétion, une solution raisonnablement élégante est de récupérer le widget attachée 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
            });
        }
    });
});

Voir Démo .

Comme mentionné ci-dessus, la largeur de la liste de saisie semi-automatique est calculé au dernier moment où vous devez modifier dans la section open événement .

Answer 4

Vous pouvez obtenir « ui-menu » widgets attaché à la <input> ayant autocomplete par rapport 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);
    }
});

Answer 5

Vous pouvez envelopper la boîte d'entrée qui déclenche l'auto-complétion dans une div, donner la div id un spécifique, puis ajoutez l'auto complète ul à cette div plutôt que le corps du document. De cette façon, vous pouvez cibler avec elle 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> 

Answer 6

Sans l'aide supplémentaire du code Javascript, vous pouvez utiliser 1 ligne simple 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 avec min-width ?

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

En outre, si vous faites voulez pas utiliser !important, vous pouvez détailler la règle avec les autres classes:

.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 me évité d'autres hacks JS, espérons qu'il aide!

Answer 7

J'aime Lögdberg réponse, mais @ Martin si vous utilisez des largeurs fixes de taille plutôt que de faire des mathématiques de fantaisie sur les résultats retournés pour définir la largeur, vous pouvez aussi simplement définir la largeur en CSS

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

Answer 8

Une amélioration sur la réponse Martin Lögdberg. Cela a fonctionné mieux pour moi parce que j'avais beaucoup de champs de saisie sur la page

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

Answer 9

API de lecture, je viens d'ajouter une classe ui-avant du parent div de mon Entrée , et qui fonctionne très bien.

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

Voir :

  

[...] les parents du champ de saisie seront vérifiés pour une classe de    ui-avant . Si un élément de la classe ui-avant se trouve, le menu   sera ajouté à cet élément . Quelle que soit la valeur, si aucune   élément est trouvé, le menu sera ajouté au corps.

L'élément annexe déterminer la position et la largeur du menu.

Answer 10

de jQuery UI 1.10, le widget a été saisie semi-automatique réécrite en utilisant l'usine widget . Dans le cadre de cela, le autocomplete contient maintenant un _resizeMenu point d'extension, qui est appelée lorsque dimensionnement du menu avant d'afficher.

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

Answer 11

J'ai réussi à le résoudre avec le CSS en ajoutant flottant au menu autocomplete.

.ui-autocomplete { float: left; }

Depuis le menu saisie semi-automatique est positionné absolute et un enfant direct de la <body>. Je suppose qu'il obtient sa largeur maximum du corps, et depuis sa position absolue, il ne peut pas être affiché sous la forme inline-block pour éviter de prendre tout l'espace disponible.

En outre .ui-autocomplete { width: 1%; } semble fonctionner.