3

私は Twitter の typeahead.js ヘッダーを使用しています。以下は動作するコードです。ただし、ローカルの配列の代わりに関数を使用してデータセットを作成できる方法があるかどうかを知りたいです。あなたの助けに感謝します。

    <input id="look" placeholder="search" autocomplete="off" />
        <button id="btn">Submit</button>

        <script type="text/javascript">
            $("#look").typeahead({
                name: 'accounts',
//Would like to use a function to populate my dataset here instead of this array
                local: ['timtrueman', 'JakeHarding', 'vskarich']
            });

            $("#btn").click(function () {
                $("#look").typeahead('setQuery', 't');
                $("#look").focus();
            });

        </script>
</body>
4

2 に答える 2

1

静的データのみを提供するため、ニーズにより適してlocalいると思います。remote

$('#look').typeahead({
    name: 'accounts',
    remote: '/your/backend/url?q=%QUERY'
});

したがって、タイプアヘッドは、値が入力した値である/your/backend/urlパラメーターを使用して AJAX 要求をに送信します。qバックエンドは、そのルックアップ リクエストに対してレスポンスを返せるはずです。

バックエンドからの応答をデバッグしてそのデータを処理する場合は、次を使用します。

$('#look').typeahead({
    name: 'accounts',
    remote: {
        url: '/your/backend/url?q=%QUERY',
        filter: function(resp) {
            var dataset = [];
            console.log(resp); // debug the response here

            // do some filtering if needed with the response          

            return dataset;
        }
    }
});

それが役に立てば幸い。

于 2013-08-27T09:38:38.593 に答える
0

これは、次のリリース (v0.10.0) で利用できるようになります。

GitHub のバージョンの readme のSectionsの下にあるsourceパラメータを参照してください。

readme からの抜粋:

タイプアヘッドは、1 つ以上のセクションで構成されます。単純なユースケースの場合、通常は 1 つのセクションで十分です。ただし、twitter.com で先行入力検索のようなものを構築したい場合は、複数のセクションが必要になります。セクションは、次のオプションを使用して構成できます。

  • name – セクションの名前。デフォルトは乱数です。

  • source – セクションのバッキング データ ソース。署名付きのデータセットまたは関数 (クエリ、cb) のいずれかです。後者の場合、cb は query に一致するデータの配列で呼び出されることが期待されます。必須。

  • ハイライト– true の場合、提案がレンダリングされるときに、テキスト ノード内の現在のクエリのパターン マッチが強い要素でラップされます。デフォルトは false です。

  • templates – セクションをレンダリングするときに使用されるテンプレートのハッシュ。

    • empty – 指定されたクエリで使用できる候補が 0 の場合にレンダリングされます。HTML 文字列またはプリコンパイル済みテンプレートのいずれかです。プリコンパイルされたテンプレートの場合、渡されたコンテキストにはクエリが含まれます。

    • header – セクションの上部に表示されます。HTML 文字列またはプリコンパイル済みテンプレートのいずれかです。プリコンパイルされたテンプレートの場合、渡されるコンテキストには query と isEmpty が含まれます。

    • フッター– セクションの下部に表示されます。HTML 文字列またはプリコンパイル済みテンプレートのいずれかです。プリコンパイルされたテンプレートの場合、渡されるコンテキストには query と isEmpty が含まれます。

    • 提案 – 単一の提案をレンダリングするために使用されます。設定する場合、これはプリコンパイル済みのテンプレートである必要があります。関連するデータム オブジェクトがコンテキストとして機能します。デフォルトは、ap タグでラップされたデータムの値です。

于 2013-08-28T13:02:38.880 に答える