在Json中使用typeahead.js

Question

I'm following this link which is a great clear blog post about typeahead.js with Json. However, I'm having problems with it and can't figure out where I'm going wrong.

Here is my js:

<script type="text/javascript">
    $('#Search').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        displayKey: 'stateName',
        source: function (query, process) {
            states = [];
            map = {};

            var data = [
                { "stateCode": "CA", "stateName": "California" },
                { "stateCode": "AZ", "stateName": "Arizona" },
                { "stateCode": "NY", "stateName": "New York" },
                { "stateCode": "NV", "stateName": "Nevada" },
                { "stateCode": "OH", "stateName": "Ohio" }
            ];

            $.each(data, function (i, state) {
                map[state.stateName] = state;
                states.push(state.stateName);
            });

            process(states);
        },
        updater: function (item) {
            selectedState = map[item].stateCode;
            return item;
        }
    });
</script>

When I type in the input control all the results come back as undefined. I think it's something to do with the displayKey and I've tried setting it to state.stateName but that results in the same problem. Maybe I'm looking in the wrong area?

I've setup a plnkr.co demo here.

Thanks for reading.

Paul

Answer 1

You need to change your states.push row, in your plunker it is on row 45. Typeahead expects results in JSON format, now you are just pushing results.

Change row 45 to:

states.push({stateName : state.stateName});

Now your displayKey: "stateName" (which is the key of JSON formatted data) will exist and it will show the name of the state as a result.