Comment retourner jquery autocomplete suite à la div?

J'ai trouvé ici que de remplacer l'un de la saisie semi-automatique des événements. Mais quelqu'un peut-il merci de me fournir un exemple de la façon de faire de même?

OriginalL'auteur LA_ | 2011-10-29

  1. 16

    La appendTo option ne fonctionne en effet comme prévu, et si vous inspectez du DOM, la <ul> résultats de l'élément sera rattachée à l'élément. Toutefois, en raison du positionnement absolu généré par jQueryUI, la liste encore apparaît directement sous la <input>.

    Cela dit, vous pouvez remplacer l'interne _renderItem directement ajouter les résultats à un tout autre élément, par exemple:

    HTML

    <input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>

    JavaScript

    $('input').autocomplete({
    search: function(event, ui) {
        $('.test ul').empty();
    },
    source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.test ul'));
};

    J'ai également créé un démo pour le démontrer. Veuillez noter que la dernière bibliothèque jQuery n'a pas eu de jQueryUI testé contre, je suis donc en utilisant la version précédente ce qui me permet de sélectionnez cette option pour inclure jQueryUI directement avec le jsFiddle options.

    Merci, on dirait que c'est ce que je suis à la recherche pour - de le tester plus 😉
    Il semble que l'SÉLECTIONNEZ gestionnaire qui serait normalement l'incendie lorsque l'on sélectionne une option d'auto-complétion ne fonctionne pas avec cette configuration. Est-il un moyen de le faire fonctionner?
    Correct. Étant donné que les options ont été poussés à un autre élément, aucun des jQueryUI événements seront tirées. Vous auriez besoin de dupliquer les événements sur mesure pour votre élément de sortie pour imiter la jQueryUI de saisie semi-automatique des événements et qui semble tout à fait tort. Vous pouvez forcer la jQueryUI élément à une nouvelle position qui permettrait de conserver les événements qui pourraient travailler pour vous.
    Génial! Il sera vraiment utile pour moi car je suis en train d'utiliser Geonames service web avec jQuery Mobile. Merci!!!!!!

    OriginalL'auteur andyb

  2. 5
    <div class="test">Output goes here:<br/></div>

<script>
  $("input#autocomplete").autocomplete({
    source: ["something", "something-else"],
    appendTo: ".text",
    position: { my: "left top", at: "left bottom", of: ".test" }
//other options here
  });
</script>
    Hmm, ça ne fonctionne pas pour moi en quelque sorte - $( "#search" ).autocomplete({ appendTo: ".test", source: "/search", minLength: 2}); Quel est le problème ici?
    avez-vous un div avec un class="test"?
    Sûrement. J'ai essayé ici - jsfiddle.net/Gn2dX, il ne fonctionne pas aussi ((.
    autocomplete fait partie de jquery-ui. Essayez de charger le fichier après jquery. Votre exemple: jsfiddle.net/Gn2dX/2 jquery-ui: jqueryui.com/download
    jquery-ui sûrement œuvres. Et il est chargé après jquery ui dans mon code, donc ça aide pas...

    OriginalL'auteur samura

  3. 1

    J'avais besoin de plus de contrôle sur l'endroit où placer les données, donc, c'est comment je suis allé à ce sujet:

    $("#input").autocomplete({
    minLength: 3,
    source: [
        "ActionScript",
        "AppleScript",
        "Asp"
    ],
    response: function(event, ui) {
        console.log(ui.content);
        //put the content somewhere
    },
    open: function(event, ui) {
        //close the widget
        $(this).autocomplete('close');
    }
});

    OriginalL'auteur hle

  4. 1

    hle réponse travaillé impressionnant pour moi et vous donne plus de flexibilité! Voici mon code de test qui a été modifié par sa réponse:

    $("#autocomplete").autocomplete({
    minLength: 3,
    source: ["something", "something-else"],
    response: function(event, ui) 
    {
        console.log(ui.content);
        //put the content somewhere
    },
    open: function(event, ui) 
    {
        //close the widget
        $(this).autocomplete('close');
    }
});

    OriginalL'auteur Qtpounder