Re-positionnement de Jquery UI Autocomplete Zone de Résultats

Je suis en utilisant le Jquery UI Autocomplete plugin pour un simple terme de recherche outil de suggestion. Il est en place et fonctionne avec aucun problème, sauf que je ne peux pas déplacer la zone de résultats. En gros, j'ai besoin de le déplacer de 20 pixels vers la gauche et 4 pixels vers le bas. J'ai tenté de remplacer l'INTERFACE utilisateur de Jquery CSS, mais n'ont pas été en mesure de repositionner la boîte.

Toute l'aide de quelqu'un expérimenté avec cette question serait grandement apprécié.

InformationsquelleAutor JP1971 | 2011-06-07
  1. 25

    Voici une façon pour vous de le faire, tapant dans les open de l'événement et de changer la position du menu lorsque cet événement se produit:

    $("#autocomplete").autocomplete({
    appendTo: "#results",
    open: function() {
        var position = $("#results").position(),
            left = position.left, top = position.top;

        $("#results > ul").css({left: left + 20 + "px",
                                top: top + 4 + "px" });

    }
});

    Je suis également en utilisant le appendTo option pour vous permettre de trouver le ul qui contient le menu facilement. Vous pourriez le faire sans cette option si.

    Voici un exemple de travail: http://jsfiddle.net/9QmPr/

    • Quand je intégrer ce code dans le projet sur lequel je travaille, je reçois un ce.le menu n'est pas défini d'erreur.
    • Je ne peux pas vous aider, à moins que vous publiez certaines de code. Vous pouvez ouvrir une autre question pour de meilleurs résultats.
    • que faire si je veux redimensionner mon <ul> tels que sa largeur est la même que la largeur de mon <input> ?
    • Avez-vous essayé: $("#results > ul").width($("#results").width());?
    • J'ai essayé ta solution et il a travaillé sur FF, Chrome et IE8-9, mais pas sur IE7, voici comment je l'ai fait, appendTo: "#results", open: function(){ var position = $("#results").position(), left = position.left, top = position.top; $("#results > ul").css({left: (left + 15) + "px", top: (top + 30) + "px", width: (206) + "px", float: "left"}); } ai-je fait quelque chose de mal? Je veux dire les choses est, sur IE7 ma saisie semi-automatique des résultats ne sont pas situés en dessous de mon #résultats div contrairement à d'autres navigateurs.
    • Cela a fonctionné parfaitement, merci une tonne.

    InformationsquelleAutor Andrew Whitaker
  2. 21

    Cela peut être facilement réalisé par le position , plus précisément le offset de la propriété:

    $('#myField').autocomplete({
    source: …,
    position: {
        offset: '20 4' //Shift 20px to the left, 4px down.
    }
});
    • Le héros! J'ai trouvé ceci APRÈS le hack de la position ouverte.
    • Assurez-vous de vérifier tous les paramètres disponibles avec l'option position ici api.jqueryui.com/position
    InformationsquelleAutor jensgram
  3. 17

    Quelque chose comme ce serait trop de travail

    open : function(){
        $(".ui-autocomplete:visible").css({top:"+=5",left:"-=2"});
    },
    • La solution la plus Simple 😉
    • Parfait. Cela a fonctionné pour moi, en utilisant 1.12.1 tandis que la position de la propriété n'a pas de travail.
    • A travaillé Pour moi. Merci.
    InformationsquelleAutor goksel
  4. 1

    Il semble préférable d'utiliser cette option,

    appendTo: "#autocomplete_target_wrapper",
menudocking: {
    menucorner: "right top",
    inputcorner: "right bottom",
    collision: "none"
}

    Lien officiel
    https://forum.jquery.com/topic/autocomplete-menu-docking-position

    InformationsquelleAutor Savickii Stanislav