2

私は使っている

http://twitter.github.io/typeahead.js/バージョン0.9.3

とJQuery version 2.0.3

以下の例がありますが、正しく動作することがわかっています。

<input id="subCategory" name="subCategory" type="text" />
<script>
    $('#subCategory').typeahead({
        name: "subCategory",
        local: ["how", "when", "where", "who", "why"],
        limit: 10
    });
</script>

JSONのAJAXリクエストからの成功した結果を使用できるように、これを変更するにはどうすればよいですか?

以下の例は機能しません。最初に考えたのは、からの応答を待っていないためであり $.getJSON()、更新をポーリングするか、非同期呼び出しが完了するまで待機する必要があるためです。

<script>
    $('#subCategory').typeahead({
        name: "subCategory",
        local: $.getJSON("/subcategories/all/"),
        limit: 10
    });
</script>

私の最初の考えは、$.getJSON()代わりに関数の成功コールバック内で上記の先行入力設定を適用する必要があるということですか? これにアプローチするより良い方法はありますか？

JSONResultJSON 呼び出しは、以下の基本的な例のようなものを返す MVC コントローラー アクションに対するものです。

    public ActionResult All()
    {
        return Json(_subCategoryService.GetAll(), JsonRequestBehavior.AllowGet);
    }

私はテストを行い、このgetJSONリクエストが正しく機能することを確認しました。

アップデート：

それについて考えて、非同期呼び出しの代わりに以下を実行すると、もう少し進みますが、先行入力データには1つのアイテムundefinedが表示されますが、これはより適切に思えますが、完全なリストを一度だけ入力してから、誰かがクエリ パラメータを入力ボックスに入力しているときに、このリモート呼び出しを行うのではなく、クライアント。

<script>
    $('#subCategory').typeahead({
        name: "subCategory",
        remote: "/subcategories/all/",
        limit: 10
    });
</script>

更新 2:

また、最初の例はプリミティブのリストであり、サブカテゴリは :( ではない..例：

[{ id: 1, name: "subcategory-1" }, { id: 2, name: "subcategory-2" }]

だから今、私は先行入力prefetchオプションとそのfilter属性を見始めていますが、実際にはこれをドロップダウンのように使用しようとしているので、リスト内の特定のエントリのバッキング値として Id を選択したいと考えています

更新 3:

タイプアヘッド入力をコンボボックスのように使用しようとしていたため、例を変更しましたが、JSON 応答ではなくローカル データを使用すると、以下が機能し、バッキングid値が非表示フィールドに格納されます。

    <input id="subCategorySelection" type="hidden" />
    <input id="subCategory" name="subCategory" type="text" />

<script>
    $("#subCategory").typeahead({
        name: "subCategories", // the name for the dataset
        local: [{ id: 1, name: "subcategory-1" }, { id: 2, name: "subcategory-2" }],
        limit: 10,
        valueKey: "name" // the value shown in the textbox
    }).on("typeahead:selected typeahead:autocompleted",
        function(e, datum) {
            $("#subCategorySelection").val(datum.id);
        }
    );
</script>
4

2 に答える 2

0

以下は、成功のコールバック内で実行する例ですが、これをどのように使用する必要があるかはあまり好きではありません。

    $.getJSON("/subcategories/all/", null, function(response) {
        $("#subCategory").typeahead({
            name: "subCategories", // the name for the dataset
            local: response,
            limit: 10,
            valueKey: "name"
        }).on("typeahead:selected typeahead:autocompleted",
            function(e, datum) {
                $("#subCategorySelection").val(datum.id);
            }
        );
    });

今のところ、とにかくこれを行う必要はなく、このソリューションを使用して行っていますprefetch

    $("#subCategory").typeahead({
        name: "subCategories", // the name for the dataset
        prefetch: {
            url: "/subcategories/all/", 
            ttl: 360000 /* 1 hour of local storage */
        },
        limit: 10,
        valueKey: "name"
    }).on("typeahead:selected typeahead:autocompleted",
        function(e, datum) {
            $("#subCategorySelection").val(datum.id);
        }
    );
于 2013-09-25T13:49:15.563 に答える