Using typeahead.js with jquery ajax call

我正在使用

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>

然后，如何更改此设置，以便我可以使用 AJAX 请求对 JSON 的成功结果？

下面的示例不起作用，我的第一个想法是因为它没有等待$.getJSON()和我的响应来轮询更新或等待异步调用完成。

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

我

的第一个想法是，我必须在$.getJSON()函数的成功回调中应用上面的预类型配置？ 有没有更好的方法来解决这个问题？

JSON 调用是对 MVC 控制器操作的调用，该操作返回类似于以下基本示例的JSONResult：

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

我已经测试过并知道这个getJSON请求可以正常工作。

---

更新：

在考虑它并执行以下操作而不是异步调用时，我会走得更远，但是 typeahead 数据显示 1 个项目undefined但这似乎更合适，但是我只打算填充完整列表一次，然后在客户端上过滤它，而不是在有人使用查询参数输入输入框中时进行此远程调用。

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

---

更新 2：

我现在也意识到我的第一个示例是原语列表，因为我的子类别不:(咄..例：

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

所以现在我开始查看 typeahead prefetch 选项和 filter 属性，但我真的试图使用它，就好像它是一个下拉列表一样，所以想选择 Id 作为列表中特定条目的支持值

---

更新 3：

由于我尝试将 typeahead 输入用作组合框，因此我后来更改了我的示例，但使用本地数据而不是我的 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>

    $.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);
            }
        );
    });

    $("#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);
        }
    );