Changement de largeur des widgets jQuery-ui autocomplete individuellement

j'aime la réponse de luqui. Mais si vous êtes dans une situation où vous ne pouvez pas utiliser la fonction appendicto (pourrait être due à débordement caché, etc.), vous pouvez utiliser le code ci-dessous pour vous assurer que vous apporter des modifications à la liste correcte.

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

Réf: http://docs.jquery.com/UI/Autocomplete#method-widget

si vous avez plusieurs commandes qui utilisent autocomplete, une solution raisonnablement élégante est de récupérer le widget attaché à la commande au dernier moment et de 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
            });
        }
    });
});

Vue Démo .

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

vous pouvez obtenir" ui-menu "widget attaché à la <input> ayant autocomplete à l'égard de $('#myinput').data("autocomplete").menu . Ainsi, pour changer la largeur, vous pouvez utiliser

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

, Vous pouvez envelopper la zone d'entrée qui est le déclenchement de l'auto-complétion dans un div, donner l'div id, puis ajouter l'auto complète ul div plutôt que pour le corps du document. De cette façon, vous pouvez le cibler avec css basé sur le 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> 

sans utiliser de code Javascript supplémentaire, vous pouvez utiliser 1 ligne CSS simple:

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

simplement parce que width est écrasé par le JS, parfois même avec des solutions qui utilisent open: function(event, ui) { ... } (comme rkever's answer , qui n'a pas fonctionné dans mon cas). Cependant, min-width n'est pas écrasée , donc il vient en maniable.

aussi, si vous faites ne voulez pas utiliser !important , vous pouvez détailler 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 piratages JS, j'espère que ça aidera!

j'aime la réponse de @Martin Lögdberg mais si vous utilisez des largeurs de taille fixe plutôt que de faire des maths de fantaisie sur les résultats retournés pour définir la largeur, alors vous pourriez également juste définir la largeur dans CSS

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

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

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

en lisant L'API, je viens d'ajouter une classe ui-front à la div du parent de mon input , et cela 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 ici :

[...] les parents du champ d'entrée seront vérifiés pour une classe de ui-front . Si un élément avec la classe ui-front est trouvé, le menu sera doit être ajouté à cet élément . Quelle que soit la valeur, si aucune élément est trouvé, le menu sera annexée au corps.

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

à partir de jQuery UI 1.10, le widget autocomplete a été réécrit en utilisant le widget factory . Dans le cadre de cela, l'autocomplete contient maintenant un point d'extension _resizeMenu , qui est appelé lors du dimensionnement du menu avant l'affichage.

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

j'ai réussi à résoudre ce problème avec CSS en ajoutant float au menu autocomplete.

.ui-autocomplete { float: left; }

puisque le menu autocomplete est positionné absolute et un enfant direct du <body> . Je suppose qu'il obtient c'est la largeur maximale du corps, et puisque c'est la position absolue il ne peut pas être affiché comme inline-bloc pour éviter de prendre tout l'espace disponible.

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