javascript - how to use json on twitter typeahead

Question

I have a json like this:

{"num": ["test", "test group event"]}

I want to use typeahead.js, but their json is like this:

["Andorra","United Arab Emirates"]

How can I use my json for the example below?

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        var countries = new Bloodhound({
            datumTokenizer : Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer : Bloodhound.tokenizers.whitespace,
            limit : 10,
            prefetch : {
                url    : 'http://127.0.0.1:8000/mysearch/',
                filter : function(list) {
                    return $.map(list, function(country){ 
                        return { 
                            name : country 
                        };
                    });
                }
            }
        });
        countries.initialize();
        $('#prefetch .typeahead').typeahead(null, {
            name : 'countries',
            displayKey : 'name',
            source : countries.ttAdapter()
        });
    });//]]>  
</script>

Update:

My json is coming from the server(http://rroyales.webfactional.com/mysearch/1.json) so if possible I think we have to use prefetch to get json from the server. I don't want to use getjson to capture it in a variable or is there an easier way to capture it in a variable?

Update 2:

what is wrong with my json coming from haystack - created a new question related to this

Answer 1

Update

This is how your bloodhound should look like

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('item'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: "http://jsbin.com/nixalofara/1.json",
        filter: function (data) {
            return $.map(data['num'], function (item) {
                return {
                    item: item
                };
            });
        }
    }
});

And typeahead like this

$('.typeahead').typeahead({
    highlight: true
}, {
    displayKey: 'item',
    source: dataSource.ttAdapter()
});

Here is a demo

---

`var data = {"num": ["one", "two"]};` This is how your bloodhound should look like for data like above var bloodhound = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, local: $.map(data['num'], function(item) { return { value: item }; }) }); And typeahead like this $('.typeahead').typeahead({ highlight: true }, { source: bloodhound.ttAdapter() }); Hope this helps.