default-suggestions.html

<div id="default-suggestions">
  <input class="typeahead" type="text" placeholder="NFL Teams">
</div>

default-suggestions.js

var nflTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) { return obj.team; },
  prefetch: '../data/nfl.json'
});

function nflTeamsWithDefaults(q, sync) {
  if (q === '') {
    sync(nflTeams.get('Detroit Lions', 'Green Bay Packers', 'Chicago Bears'));
  }

  else {
    nflTeams.search(q, sync);
  }
}

$('#default-suggestions .typeahead').typeahead({
  minLength: 0,
  highlight: true
},
{
  name: 'nfl-teams',
  display: 'team',
  source: nflTeamsWithDefaults
});

@jharding For me, this required the async argument. I'm using remote along with prefetch. Anyways, maybe that's worth mentioning.

+1 the above comment. Make sure to add ASYNC

https://gist.github.com/blairanderson/96229cb51cf1d6810db8f0962e2af81c

This example doesn't work for me. Someone can please help me with this -
http://jsfiddle.net/RavindraBajpai/yjshofdo/1/

Do I need to additionally trap onClick event and turn it down to some other may be keyDown etc, even this is also not working.

This example doesn't work for me. Someone can please help me with this -
http://jsfiddle.net/RavindraBajpai/yjshofdo/1/

Do I need to additionally trap onClick event and turn it down to some other may be keyDown etc, even this is also not working.

Hi if you are using Local data source then you would need an array of objects containing the key "team" e.g.
[ { "team": "San Francisco 49ers" }, { "team": "Chicago Bears" }, ... ]
To use the same data as in this example source use
prefetch: 'https://twitter.github.io/typeahead.js/data/nfl.json'

http://jsfiddle.net/Lhu26akb/2/

这是一个错误的例子，this is error code

let suggestion_source = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
'Red','Blood Red','White','Blue','Yellow','Green','Black','Pink','Orange'
],
remote: {
url: "/query?key=%QUERY",
wildcard: "%QUERY",
transform: function (response) {
return response;
}
}
});
# async args not null
function nflTeamsWithDefaults(q, sync, async) {
if (q === '') {
sync(suggestion_source.local);
} else {
suggestion_source.search(q, sync, async);
}
}

$(`#the-basics${id} .typeahead`).typeahead(
    {highlight: true, minLength: 0},
    {source: nflTeamsWithDefaults}
);

let suggestion_source = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: [
            'Red','Blood Red','White','Blue','Yellow','Green','Black','Pink','Orange'
        ],
        remote: {
            url: "/query?key=%QUERY",
            wildcard: "%QUERY",
            transform: function (response) {
                return response;
            }
        }
    });
    # async args not null
    function nflTeamsWithDefaults(q, sync, async) {
        if (q === '') {
            sync(suggestion_source.local);
        } else {
            suggestion_source.search(q, sync, async);
        }
    }

    $('#the-basics .typeahead').typeahead(
        {highlight: true, minLength: 0},
        {source: nflTeamsWithDefaults}
    );