Jquery UI Autocomplete ajoute au corps plutôt qu'à l'objet donné dans JQ UI Version 1.8.6

Question

J'ai utilisé jquery auto-completes sur ma page Web pendant un moment, mais après avoir mis à jour jquery ui vers la version 1.8.6 de 1.8rc3, l'objet autocomplete ul est maintenant ajouté au corps plutôt que directement après le sélecteur donné.

Le code ci-dessous n'est pas valide bien sûr, il met simplement en évidence le problème que j'ai.

Dans 1.8rc3

$("#myinput").autocomplete(..... 

    <input id="myinput"/> 
    <ul id="autocomplete"></ul> 
    <div>Loads of other content</div> 
    <div>Loads of other content</div> 
    <div>Loads of other content</div> 
    </body> 

Dans 1.8.6

$("#myinput").autocomplete(..... 

    <input id="myinput"/> 
    <div>Loads of other content</div> 
    <div>Loads of other content</div> 
    <div>Loads of other content</div> 
    <ul id="autocomplete"></ul> 
    </body> 

Ma question est, est-il un moyen de faire la saisie semi-automatique append après mon sélecteur donné plutôt que annexant au corps?

Answer 1

Vous pouvez utiliser l'option "appendTo"

$("#input").autocomplete({ 
    appendTo: $("#input").next() 
}); 

Mais cela ne peut ajouter à un certain conteneur que vous pensez. Si vous voulez pouvoir ajouter la saisie semi-automatique juste après votre saisie, vous devez modifier directement la source de saisie semi-automatique (modifier appendTo() pour after())

Answer 2

La réponse originale m'a aidé à trouver une solution plus simple.

Ma situation était un peu différente: j'essayais d'obtenir une saisie semi-automatique personnalisée fonctionnant dans un modal (Bootstrap). En outre, j'utilisais une version plus récente de jquery-ui (1.11.4). J'espère que ma réponse ajoutera de la valeur à quiconque arrivera à cette publication.

Selon the documentation pour l'option appendTo:

Lorsque la valeur est nulle, les parents du champ d'entrée sera vérifié pour une classe d'avant-ui. Si un élément avec la classe ui-front est trouvé, le menu sera ajouté à cet élément.

En ajoutant une classe ui-avant à un élément parent (dans mon cas, le modal), j'ai pu apporter le menu déroulant de liste dans les coulisses et dans le modal. Vous pouvez donc envelopper votre entrée dans un conteneur et ajouter au conteneur la classe ui-front.