web-dev-qa-db-fra.com

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

J'ai implémenté une zone de saisie semi-automatique de l'interface utilisateur jQuery, et plutôt que d'être la largeur de la zone de texte, les options de la liste déroulante s'agrandissent pour remplir la largeur restante de la page.

Regardez cet exemple pour le voir par vous-même: http://jsbin.com/ojoxa4

J'ai essayé de définir la largeur de la liste immédiatement après l'avoir créée, comme suit:

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

Cela semble ne rien faire.

J'ai également essayé de définir la largeur à l'aide de styles sur la page:

ui-autocomplete { width: 500px; }

Cela fonctionne étonnamment bien que cela voudrait dire que tous les compléments automatiques sur une page devraient avoir la même largeur, ce qui n’est pas idéal.

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

jqueryjquery-uiautocompletejquery-ui-autocomplete
66
Ender

Il se trouve que le problème est que le menu est en train de s’étendre pour remplir la largeur de son élément parent, qui est par défaut le corps. Cela peut être corrigé en lui donnant un élément contenant de la largeur correcte.

J'ai d'abord ajouté un <div> comme ceci:

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

Le positionnement absolu me permet de placer le <div> immédiatement après la saisie sans interrompre le flux de documents.

Ensuite, lorsque j'appelle la saisie semi-automatique, je spécifie un argument appendTo dans les options, ce qui entraîne l'ajout du menu à mon <div>, et hérite donc de sa largeur:

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

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

57
Ender

J'utilise cette solution drop-in:

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.

99
Arnaud Leymet

J'ai eu un Dig autour dans le code autocomplete et le coupable est ce petit blighter

_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.width ("") est supposé faire mais ui.width (""). OutWidth () renvoie toujours la largeur du corps car c'est à quoi ul est ajouté. Par conséquent, la largeur n'est jamais définie sur la largeur des éléments ....

En tous cas. Pour réparer, ajoutez simplement ceci à votre code

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

Est-ce un bug?

MODIFIER: Au cas où quelqu'un voudrait voir un cas de test réduit pour le bogue ici il l'est.

37
madcapnmckay

Je sais que cela a été répondu depuis longtemps, mais je pense qu'il existe une meilleure solution

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

Cela a bien fonctionné pour moi.

22
obomaye

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 

22
Andrius Chamentauskas

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'); // HERE
            }
        })
17
hmoyat

J'ai rencontré ce problème aussi, mais je me suis rendu compte que j'avais oublié d'inclure une référence à la feuille de style jquery.ui.autocomplete.css. Avez-vous inclus cette feuille de style dans votre mise en page/maquette?

15
Nick Olsen

$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
} 
});

3
pradip_PRP

Eh bien, Ender. Je ne sais pas si ma solution peut vous aider ou non, mais avec Jqueryui remote-with-cache.html, cela a fonctionné. Je viens de mettre dans la propriété size dans la zone de texte. 

Veuillez consulter le code ci-dessous: 

<div class="demo">
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="30"/>
    </div>
</div>
1
Meng Lengkhim

Si vous aimez utiliser css, essayez ceci:

.ui-widget-content.ui-autocomplete{ width: 350px; }

Cela fonctionnera à chaque entrée de saisie semi-automatique.

0
Flea

Ma solution a été d’ajouter l’auto-complétion à une div avec un identifiant, et ils ont défini CSS pour cet ul spécifique:

jQuery/JavaScript:

$("input[name='search-text]").autocomplete({
    appendTo: "#item-search-autocomplete",
    source: ....
});

CSS:

#item-search-autocomplete .ui-autocomplete {
    width: 315px;
}

Fonctionne comme un charme.

0
Eric Belair

Si vous ne pouvez pas définir la largeur de manière dynamique et que rien ne fonctionne, essayez d’inclure cette option.

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

soit dans une feuille liée ou codé en dur et définissez les paramètres ici.

Cela a fonctionné pour moi après avoir tout essayé

0
user489419

Je sais que cela a été répondu depuis longtemps, mais le moyen le plus simple que je trouve est d'utiliser l'identifiant de la saisie semi-automatique, et de régler la largeur sur 100 pixels, vous pouvez appeler

$('.ui-autocomplete-input#MyId').css('width', '100px');

après avoir terminé votre appel $('#MyId').autocomplete(...);. De cette façon, vous ne lierez pas l'ordre de vos zones de texte à complétion automatique dans votre DOM à votre script.

0
arviman

Si vous utilisez l'auto-complétion officielle de jQuery ui (je suis sous 1.8.16) et souhaitez définir la largeur manuellement, vous pouvez le faire.

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