Using Knockout With Typeahead.js And Bloodhound.js V0.10

I have just converted over to using Bloodhound.js and Typeahead.js with Knockout. I am having a few issues - The Typeahead is not displaying the Name property in the suggestions

Solution 1:

The first issue is with the displayKey. You need to supply an explicit function in your binding

HTML

<inputtype="text" data-bind="typeahead: { name: 'something', taOptions: theseOptions, displayKey: 'Name' }, value: thisValue" />

Javascript

// In ko.bindingHandlers.typeahead.init functionvar displayKey = options.displayKey;
    options.displayKey = function(item) {
        return item[displayKey]();
    };

The second problem is with the use of local. It looks like the system doesn't recalculate the source after initialization. Looking at the docs you probably need to make use of the remote option and pretend to be an ajax request/response. You also need to implement your own result filter, as well as hacking around either requestCache when options are updated.

I've update your jsFiddle with the following...

self.theseOptions = new Bloodhound({
  datumTokenizer: function(d) { 
      var seomth = Bloodhound.tokenizers.whitespace(d.Name());
      console.log(seomth);
      return seomth },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote : {
        url : '%QUERY',
        transport : function(url, options, onSuccess, onError) {
            var deferred = $.Deferred();
            deferred.done( function() { onSuccess(this); });

            var filterVal = url.toLowerCase();
            var result = self.someOptions().filter( function(item) {
                return !!~item.Name().toLowerCase().indexOf(filterVal);
            });
            deferred.resolveWith( result );
            return deferred.promise();
        }

    }
  //local: self.someOptions()
});

self.addNew = function () {
    self.someOptions.push(new Option(self.someOptions().length + 1, 'Johnnn'));
    self.theseOptions.transport.constructor.resetCache();
}