web-dev-qa-db-fra.com

Changer la position de l'autocomplete de l'interface utilisateur JQuery UI - Pop Up, au lieu de bas

Je place une boîte autocomplete au bas de ma page et j'aimerais que les résultats apparaissent sur la zone de texte, au lieu de ci-dessous. Comment puis-je faire ceci?

jqueryjquery-uiautocomplete
25
Chris

Semble que je suis déjà capable de répondre à ma propre question. Je suis ouvert à une meilleure solution si quelqu'un l'a eu. J'ai ajouté ceci au démarrage automatique de l'autocomplete. Il repositionne essentiellement la case ouverte à un nouveau décalage.

open: function(event, ui) {
    var autocomplete = $(".ui-autocomplete");
    var oldTop = autocomplete.offset().top;
    var newTop = oldTop - autocomplete.height() - $("#quick_add").height() - 10;

    autocomplete.css("top", newTop);
}
9
Chris

Réponse de @ Mvonlintel d'une autre manière, définissez la position du menu Suggestions dans la déclaration du widget:

$('selector').autocomplete(
{
    position: { my: "left bottom", at: "left top", collision: "flip" },
    .
    .
});
32
mohitp

Vous pouvez utiliser l'interface utilisateur JQuery tilitaire de position . Voici un exemple:

$(".ui-autocomplete").position({
    my: "left bottom",
    at: "left top",
    of: $("#quick_add"),
    collision: "flip flip"
});
17
mvonlintel

la version actuelle de JQuery UI permet de donner au widget autocomplete un objet de position avec les options, avec les mêmes propriétés que le widget de position mentionné ci-dessus. Vous pouvez donc l'utiliser pour positionner la liste des suggestions comme vous le souhaitez.

5
Tsahi Asher