javascript — предложения Typeahead.js не фильтруются

я использую Typeahead.js чтобы выбрать имена элементов, которые я получаю (через Bloodhound) со страницы PHP / Mysql, для одного из моих полей ввода.

Когда я набираю в поле ввода, предложение всегда отображается 5 первой строки без фильтрации, однако выделение, кажется, работает правильно (см. скриншот ниже).

Есть идеи, что я делаю не так?

Мой JS:

var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('item_name', 'item_code'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
//local: jsonData
remote  : {
url:'function/load-item.php?item_name=%QUERY',
}
});

dataSource.initialize();

$('#item_name').typeahead({
minLength : 3,
highlight : true
}, {
limit : 25,
name : 'countries',
display : function(item) {
return item.item_name
},
source : dataSource.ttAdapter(),
suggestion : function(data) {}
});

$('#item_name').on('typeahead:selected', function (e, datum) {
console.log(datum);
$('#item_code').val(datum.item_code);
});

Мой PHP:

session_start();
include ('../include/connect.php');
$query = "SELECT item_name, item_code FROM master_item";

$return = array();
if($result = $conn->query($query)){
// fetch array
while ($row=mysqli_fetch_assoc($result)) {
$return[] = $row;
}

// free result set
$result->close();
// close connection
$conn->close();

$json = json_encode($return);
print_r($json);
}

Мой вывод Json:

[{
"item_name":"wrench",
"item_code":"aa"}, {
"item_name":"compressor",
"item_code":"bb"}, {
"item_name":"grinder",
"item_code":"cc"}, {
"item_name":"air con",
"item_code":"dd"}, {
"item_name":"handphone",
"item_code":"ee"}, {
"item_name":"refreigrator",
"item_code":"ff"}]