Jquery UI autocomplete. Wie schreibt man die Ergebnisse innerhalb eines div mit innerHTML?

Habe ich ein AutoVervollständigen-Feld auf meiner website. Ich möchte nur die Anzeige der Ergebnisse in a-div - Tags statt der popup-Fenster, das das plugin öffnet nativ.

Ich suchte bereits nach Lösungen für dieses auch in anderen posts, aber das, was Sie tun, ist zu ändern Sie die position der "popup" - Fenster, und was ich will, ist zu ersetzen, die den Inhalt-div - mit dem Ergebnis, nicht, um das popup über.

Jede Beratung wird sehr geschätzt.

Dies ist der code, den ich habe:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>


</body>
</html>

.

Jquery UI autocomplete. Wie schreibt man die Ergebnisse innerhalb eines div mit innerHTML?

Poste bitte etwas code.
Hier ist ein Beispiel: jsfiddle.net/BdZPX/5
Poste bitte etwas code Frage von. Stack-Überlauf soll eigenständig sein, und Fragen mit einem link zu jsFiddle aber kein code sind entmutigt. Bitte Lesen Sie diese meta-Frage für die Logik hinter dieser.
OK, ich habe die änderungen vorgenommen. Ich wusste nicht, über die Buchung den code hier, aber es hat viel Sinn. 🙂

InformationsquelleAutor yenssen | 2012-10-22

  1. 10

    Als j08691 sagt, Sie haben, um die öffnen Ereignis an das widget. Jedoch, da Sie auch wollen, um die Elemente auszuwählen, die in der #results element, das kopieren wird nicht ausreichen.

    Ich würde vorschlagen, Sie reparent die gesamte AutoVervollständigen-Menü unter Ihrem #results element statt, und rücksetzen Sie dessen position style-Attribut zu static so bleibt es in Ort:

    $("#tags").autocomplete({
    source: availableTags,
    open: function() {
        $(this).autocomplete("widget")
               .appendTo("#results")
               .css("position", "static");
    }
});

    Sehen Sie die Ergebnisse in dieses update auf Ihrem fiddle.

    Wie kann ich ersetzen Sie den Inhalt des div-statt der addition der Ergebnisse am Ende?

    InformationsquelleAutor Frédéric Hamidi

  2. 4

    Verwenden von AutoVervollständigen open-Ereignis wie in diesem jsFiddle-Beispiel.

        open: function(e, ui) {
        var list = '';
        var results = $('ul.ui-autocomplete.ui-widget-content a');
        results.each(function() {
            list += $(this).html() + '<br />';
        });
        $('#results').html(list);
    }
    Tut mir Leid, ich wollte nicht erklären, das problem richtig. Ich möchte die Anzeige in der -div - die ganze Liste von Ergebnissen, die wählbar sind, und wählte einen von Ihnen in die -div-
    Antwort von Geige und aktualisiert.

    InformationsquelleAutor j08691

Schreibe einen Kommentar