使用knockout与typeahead.js和bloodhound.js v0.10
-
21-12-2019 - |
题
我刚刚转换为使用淘汰赛的bloodhound.js和typeahead.js。我有几个问题 -
- the typeahead在建议列表中没有显示
Name
属性 - 我无法弄清楚如何更新设置以查询
我现在'静态'添加新数据,但它仍然应该在结果集中展示,而不是
self.addNew = function () {
self.someOptions.push(new Option(self.someOptions().length + 1, 'Johnnn'));
}
.
我是为了任何工作的建议,所以如果不是必需的话,我并没有粘在血液中。某些时候绝对是一个选择。
解决方案
第一个问题是与DISPLAYKEY。您需要在绑定中提供显式功能
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();
}
. 不隶属于 StackOverflow