CODEWITHSUNDEEP
javascriptknockout.jstypeahead.jsbloodhound
PW Kad
PW Kad

Reputation: 14995

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 -

  1. The Typeahead is not displaying the Name property in the suggestions list
  2. I can't figure out how to update the set to query against

http://jsfiddle.net/Ea93f/2/

I am 'statically' adding new data right now but it should still show up in the result set, and is not

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

I am up for any suggestions that work, so I am not stuck using Bloodhound.js if it isn't required, but due to the nature of my app I cannot remove the properties as observables, but calling ko.toJS at some point is definitely an option.

Upvotes: 1

Views: 3063

Answers (1)

Robert Slaney
Robert Slaney

Reputation: 3722

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

HTML

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

Javascript

    // In ko.bindingHandlers.typeahead.init function
    var 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();
}

Upvotes: 9

Related Questions