typeahead suggestions list not decreasing

Question

I'm trying to implant twitter typeahead.js

https://github.com/corejavascript/typeahead.js

But the suggestion list doesn't decrease....

HTML code :

<div class="container">
    <form action="" method="POST">
        <div class="typeahead-wrapper">
            <input type="text" id="my_search" name="search" autocomplete="off" placeholder="Enter Country Code"/>
            <input type="submit">
        </div>
    </form>
</div>

Javascript Code

$(document).ready(function($) {
  var cities_suggestions = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("DESIGNATION"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: "villes2.json",
      transform: function(data) {
        var newData = [];
        data.forEach(function(item) {
          newData.push(item.DESIGNATION);
        });
        console.log(newData);
        return newData;
      }
    }
  });

  cities_suggestions.initialize();

  $("#my_search").typeahead(
    {
      hint: true,
      minLength: 1,
      highlight: true
    },
    {
      name: "cities",
      source: cities_suggestions, // suggestion engine is passed as the source
      limit: 10
    }
  );
});

My Json file looks like that :

[
  {
    "CODE_INSEE": 1344,
    "DESIGNATION": "1000 SAINT-DENIS-LES-BOURG"
  },
  {
    "CODE_INSEE": 1053,
    "DESIGNATION": "1000 BOURG-EN-BRESSE"
  },
  {
    "CODE_INSEE": 1225,
    "DESIGNATION": "1090 LURCY"
  },
  {
    "CODE_INSEE": 1165,
    "DESIGNATION": "1090 FRANCHELEINS"
  },
  {
    "CODE_INSEE": 1263,
    "DESIGNATION": "1090 MONTMERLE-SUR-SAONE"
  },
  {
    "CODE_INSEE": 1169,
    "DESIGNATION": "1090 GENOUILLEUX"
  }
]

I still have the ten first suggestions of the json file and anything else The console.log(NewData) is ok

Answer 1

I've found

$(document).ready(function($) {
var cities_suggestions = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'villes2.json',
    remote: {
        url: 'villes2/queries/%QUERY.json',
        wildcard: '%QUERY'
  },
});
cities_suggestions.initialize();
// init Typeahead
$('#my_search').typeahead(
{
    hint: true,
    minLength: 1,
    highlight: true
},
{
    name: 'cities',
    display: 'text',
    source: cities_suggestions,   // suggestion engine is passed as the source
    limit: 10,
});
// then fill hidden input for get the value :-)
$('#my_search').bind('typeahead:select', function(ev, suggestion) {
    $('#my_search_value').val(suggestion.value)
});

});