Typeahead.js suggestions aren't filtered

Question

I'm using Typeahead.js to select item names I'm retrieving (through Bloodhound) from a PHP/Mysql page, for one of my input fields.

When I type in the input field, the suggestion always shown 5 first row without filtering , however the highlight does appear to be working correctly (see screenshot below).

Any idea what I'm doing wrong?

---

My 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);
}); 

My 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);
}

My Json output :

[{
    "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"
}]

Answer 1

Add sufficient to your initializer and set its value to 0 . Also, there is an extra comma in your code after the remote url parameter.

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