使用typeahead.js和jquery ajax调用

Question

I am using

http://twitter.github.io/typeahead.js/ version 0.9.3

and JQuery version 2.0.3

I have the below example, which I know works correctly.

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

How can I then change this so that I can use the successful result from an AJAX request for JSON?

The below example does not work, my first thought is because it is not waiting for the response from $.getJSON() and I to poll for updates or wait until the async call finishes.

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

My first thought is that I would have to apply the typeahead configuration above inside the success callback of the $.getJSON() function instead? is there a better way of approaching this?

The JSON call is to an MVC controller action that returns a JSONResult similar to this basic example below:

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

I have tested and know that this getJSON request works correctly.

---

UPDATE:

I get a bit further when thinking about it and doing the below instead of an async call, but the typeahead data shows 1 item as undefined but this seems more appropriate, however I was only intending to populate the full list once and then filter that on the client, rather than make this remote call when someone is typing into the input box with a query parameter.

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

---

UPDATE 2:

I also now am realising that my first example is a list of primitives where as my subcategories is not :( duh.. example:

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

So now I am starting to look at the typeahead prefetch option and the filter attribute on that but I am really trying to use this as if it was a dropdown, so want to select the Id as the backing value for a particular entry in the list

---

UPDATE 3:

Since I was trying to use the typeahead input as if it was a combobox, I have since altered my example, but using local data rather than my JSON response and the below works and stores the backing id value in a hidden field.

    <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>

Answer 1

I'm afraid this is not yet supported, atleast when I looked at it some weeks ago.

But...there's this pull request that does exactly what you are trying to do.

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

Answer 2

The below is an example of doing it within the success callback, but I don't really like how this needs to be used.

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

for now I don't need to do this anyway and have gone for this solution using 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);
        }
    );