1. ホーム
  2. jquery

[解決済み】twitter bootstrap typeahead ajaxの例

2022-04-01 07:59:17

質問

の動作例を探しています。 twitter ブートストラップ タイプアヘッド 要素で、ドロップダウンに入力するために ajax 呼び出しを行います。

私は、AjaxのURLと応答を処理する方法を定義した、既存の作業jquery autocompleteの例を持っています。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

これをtypeaheadのサンプルに変換するには、何を変更すればよいのでしょうか?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

を待つことにして、' typeaheadのリモートソースサポートを追加 ' の問題が解決されます。

解決方法は?

編集: TypeaheadはBootstrap 3にバンドルされなくなりました。チェックしてみてください。

Bootstrap 2.1.0 から 2.3.2 までは、このようなことが可能です。

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

このようにJSONデータを消費するために

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

JSONデータは、jQueryがJSONとして認識するように、正しいMIMEタイプ(application/json)である必要があることに注意してください。