La largeur de saisie semi-automatique de l'interface utilisateur jQuery n'est pas définie correctement

Question

J'ai mis en place un jQuery UI Autocomplete de la boîte, et, plutôt que de la largeur de la zone de texte, les options du menu déroulant sont en expansion pour remplir le reste de la largeur de la page.

Jetez un oeil à cet exemple pour voir par vous-même: http://jsbin.com/ojoxa4

J'ai essayé de réglage de la largeur de la liste, immédiatement après la création, comme:

$('.ui-autocomplete:last').css('width',
                               $('#currentControlID').width()
                              );

Cela semble ne rien faire.

J'ai également essayé le réglage de la largeur de l'aide sur les styles de page:

ui-autocomplete { width: 500px; }

Ce N'travail, étonnamment, cependant, cela signifierait que tous les auto-complété sur une page devrait être de la même largeur, ce qui n'est pas idéal.

Est-il un moyen de régler la largeur de chaque menu individuellement? Ou mieux, quelqu'un peut-il expliquer pourquoi les largeurs ne fonctionnent pas correctement pour moi?

Answer 1

J'utilise cette solution d'accueil :

 jQuery.ui.autocomplete.prototype._resizeMenu = function () {
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());
}
 

C'est en gros la solution de @madcapnmckay , mais il n'est pas nécessaire de changer le source d'origine.

Answer 2

Il s'avère que le problème est que le menu est en pleine expansion pour remplir la largeur de son élément parent, qui par défaut est le corps. Ceci peut être corrigé en lui donnant un élément contenant de la largeur correcte.

D'abord, j'ai ajouté un <div> comme:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

Le positionnement absolu me permet de placer l' <div> immédiatement après l'entrée sans interrompre le flux de documents.

Puis, quand j'invoque la saisie semi-automatique, je spécifier une appendTo argument dans les options, provoquant le menu pour être annexé à mon <div>, et ainsi hériter de sa largeur:

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

Cela résout le problème. Cependant, je serais toujours intéressé de savoir pourquoi cela est nécessaire, plutôt que le plug-in fonctionne correctement.

Answer 3

J'ai eu un de creuser autour de dans la saisie semi-automatique du code et que le coupable est-ce blighter peu

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

Je ne suis pas sûr de ce que ul.largeur("") est supposé être fait, mais l'interface utilisateur.largeur("").outWidth() renvoie toujours la largeur du corps, car c'est ce que l'ul est ajouté. D'où la largeur est jamais définie pour les éléments de la largeur....

De toute façon. Pour fixer simplement l'ajouter à votre code

$element.data("autocomplete")._resizeMenu = function () {
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());
}

Est-ce un bug?

EDIT: Dans le cas où quelqu'un veut voir une réduction de cas de test pour le bug ici il est.

Answer 4

Définissez le css dans l'événement ouvert!

 $('#id').autocomplete({
    minLength: 3,
    source: function(request, response) {
        $.ajax({
                    url: "myurl",
                    dataType: "json",
                    type: 'POST',
                    data: {
                        'q': request.term,

                        'maxRows': 15
                    },
                    success: function(data) {

                        response($.map(data, function(item) {
                            return {
                                label: item.name,
                            }
                        })),
                    }
                })
            },
            select: function(event, ui) {
                $("#id").val(ui.item.label);
            },
            focus: function ( event, ui ){
                $form.find('#id').val(ui.item.label);
                return false;
            },
            open: function(){
                **$('.ui-autocomplete').css('width', '300px');**
            }
        })
 

Answer 5

Je sais que cela a été répondu il y a longtemps, mais j'ai rencontré le même problème. Ma solution a été d'ajouter la position: absolue