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>

然后我该如何更改它，以便我可以将 AJAX 请求的成功结果用于 JSON？

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

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

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

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

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

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

更新：

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

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

更新 2：

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

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

所以现在我开始查看 typeaheadprefetch选项和它的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

1

恐怕这还不被支持，至少当我几周前看到它时。

但是......这个拉取请求正是你想要做的。

https://github.com/twitter/typeahead.js/pull/220

于 2013-09-25T13:32:13.587 回答
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 回答