3

Web サイトにオートコンプリート フィールドがあります。プラグインがネイティブに開くポップアップ ウィンドウの代わりに、-div- タグ内に結果を表示したいだけです。

他の投稿でこれに対する解決策をすでに検索しましたが、彼らが行うことは「ポップアップ」ウィンドウの位置を変更することであり、ポップアップを配置するのではなく、-div- の内容を結果に置き換えることです。その上。

どんなアドバイスでも大歓迎です。

これは私が持っているコードです:

<!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>

.

例

4

2 に答える 2

10

j08691 が言うように、ウィジェットのオープンイベントを処理する必要があります。ただし、要素内の項目も選択する必要があるため、#resultsそれらをコピーするだけでは不十分です。

代わりに、オートコンプリート メニュー全体を要素の下に再ペアレント化し、位置スタイル属性を に#resultsリセットして、そのままにしておくことをお勧めします。static

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

fiddle へのこの更新で結果を確認できます。

于 2012-10-22T21:58:04.950 に答える
4

このjsFiddle exampleのように autocomplete の open イベントを使用します。

    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);
    }
于 2012-10-22T20:04:26.810 に答える