Type-ahead not showing multiple results from array

Question

Hello I am generating the following array as result from the search:

[{"id":"292","clientname":"John Mick"},{"id":"293","clientname":"John Tom"}]

this is what it is returned from MySQL Query, but in my Twitter typeahead configuration nothing is showing. Instead of to show 2 results.

Here is my typeahead code:

<script type="text/javascript">
$(function() {
  // Instantiate the Bloodhound suggestion engine
  var curr = {};
  var suggestions = new Bloodhound({
    datumTokenizer: function(datum) {
      return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'includes/livesearch.php?key=%QUERY',       
        wildcard: '%QUERY',
        filter: function (clientname) {
          curr[clientname.clientname] = clientname.id;
            // Map the remote source JSON array to a JavaScript object array
            return $.map(clientname, function (clientname, index) {
                return index === "clientname" ? {
                    value: clientname
                } : null;
            });
        }
    }

  });
  // Initialize the Bloodhound suggestion engine
  suggestions.initialize();

  // Instantiate the Typeahead UI
  $(".typeahead").typeahead({
    hint: true,
    minLength: 1
  }, {
    limit: 7,
    displayKey: 'value',
    source: suggestions.ttAdapter(),

  })
  .on("typeahead:selected", function (e, datum) {
    $("form [name=clientid]").val(curr[datum.value]); // set value here
    curr = {};
    var value = document.getElementById("clientid").value;
    if (value == 292) {
        $("#alltask").hide();
        $("#singletask").show();
    } else {
        $("#singletask").hide();
        $("#alltask").show();
    }
  });
})
</script> 

Any help to resolve this difficult situation is welcome. Thank you!