我刚刚转换为将 Bloodhound.js 和 Typeahead.js 与 Knockout 结合使用。我遇到了一些问题 -
- Typeahead 未在建议列表中显示
Name
属性 - 我不知道如何更新要查询的集合
我现在正在“静态”添加新数据,但它仍应显示在结果集中,但事实并非如此
self.addNew = function () {
self.someOptions.push(new Option(self.someOptions().length + 1, 'Johnnn'));
}
我愿意接受任何有效的建议,所以如果不需要的话,我不会坚持使用 Bloodhound.js,但由于我的应用程序的性质,我无法删除作为可观察对象的属性,而是调用 ko.toJS有些点绝对是一个选择。
最佳答案
第一个问题是 displayKey。您需要在绑定(bind)中提供一个显式函数
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]();
};
第二个问题是本地的使用。看起来系统在初始化后没有重新计算源。查看文档,您可能需要使用远程选项并假装是 ajax 请求/响应。您还需要实现自己的结果过滤器,以及在更新选项时绕过任一 requestCache。
我已经更新了你的 jsFiddle与以下...
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();
}
关于javascript - 将 Knockout 与 Typeahead.js 和 Bloodhound.js v0.10 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22055808/