有谁知道使用 Knockout JS 模板创建自动完成组合框的最佳方法吗？
我有以下模板：
<script type="text/html" id="row-template">
<tr>
...
<td>
<select class="list" data-bind="options: SomeViewModelArray,
value: SelectedItem">
</select>
</td>
...
<tr>
</script>
有时这个列表很长，我希望 Knockout 可以很好地与 jQuery 自动完成或一些直接的 JavaScript 代码一起使用，但收效甚微。
此外，jQuery.Autocomplete 需要一个输入字段。有任何想法吗？
这是我编写的 jQuery UI 自动完成绑定。它旨在通过一些添加来反映与 select 元素一起使用的options, optionsText, optionsValue,value绑定范式（您可以通过 AJAX 查询选项，您可以区分输入框中显示的内容与弹出的选择框中显示的内容向上。
您不需要提供所有选项。它将为您选择默认值。
这是一个没有 AJAX 功能的示例：http : //jsfiddle.net/rniemeyer/YNCTY/
这是带有按钮的相同示例，使其表现得更像一个组合框：http : //jsfiddle.net/rniemeyer/PPsRC/
以下是通过 AJAX 检索选项的示例：http : //jsfiddle.net/rniemeyer/MJQ6g/
//jqAuto -- main binding (should contain additional options to pass to autocomplete)
//jqAutoSource -- the array to populate with choices (needs to be an observableArray)
//jqAutoQuery -- function to return choices (if you need to return via AJAX)
//jqAutoValue -- where to write the selected value
//jqAutoSourceLabel -- the property that should be displayed in the possible choices
//jqAutoSourceInputValue -- the property that should be displayed in the input box
//jqAutoSourceValue -- the property to use for the value
ko.bindingHandlers.jqAuto = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var options = valueAccessor() || {},
allBindings = allBindingsAccessor(),
unwrap = ko.utils.unwrapObservable,
modelValue = allBindings.jqAutoValue,
source = allBindings.jqAutoSource,
query = allBindings.jqAutoQuery,
valueProp = allBindings.jqAutoSourceValue,
inputValueProp = allBindings.jqAutoSourceInputValue || valueProp,
labelProp = allBindings.jqAutoSourceLabel || inputValueProp;
//function that is shared by both select and change event handlers
function writeValueToModel(valueToWrite) {
if (ko.isWriteableObservable(modelValue)) {
modelValue(valueToWrite );
} else { //write to non-observable
if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['jqAutoValue'])
allBindings['_ko_property_writers']['jqAutoValue'](valueToWrite );
}
}
//on a selection write the proper value to the model
options.select = function(event, ui) {
writeValueToModel(ui.item ? ui.item.actualValue : null);
};
//on a change, make sure that it is a valid value or clear out the model value
options.change = function(event, ui) {
var currentValue = $(element).val();
var matchingItem = ko.utils.arrayFirst(unwrap(source), function(item) {
return unwrap(item[inputValueProp]) === currentValue;
});
if (!matchingItem) {
writeValueToModel(null);
}
}
//hold the autocomplete current response
var currentResponse = null;
//handle the choices being updated in a DO, to decouple value updates from source (options) updates
var mappedSource = ko.dependentObservable({
read: function() {
mapped = ko.utils.arrayMap(unwrap(source), function(item) {
var result = {};
result.label = labelProp ? unwrap(item[labelProp]) : unwrap(item).toString(); //show in pop-up choices
result.value = inputValueProp ? unwrap(item[inputValueProp]) : unwrap(item).toString(); //show in input box
result.actualValue = valueProp ? unwrap(item[valueProp]) : item; //store in model
return result;
});
return mapped;
},
write: function(newValue) {
source(newValue); //update the source observableArray, so our mapped value (above) is correct
if (currentResponse) {
currentResponse(mappedSource());
}
}
});
if (query) {
options.source = function(request, response) {
currentResponse = response;
query.call(this, request.term, mappedSource);
}
} else {
//whenever the items that make up the source are updated, make sure that autocomplete knows it
mappedSource.subscribe(function(newValue) {
$(element).autocomplete("option", "source", newValue);
});
options.source = mappedSource();
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).autocomplete("destroy");
});
//initialize autocomplete
$(element).autocomplete(options);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
//update value based on a model change
var allBindings = allBindingsAccessor(),
unwrap = ko.utils.unwrapObservable,
modelValue = unwrap(allBindings.jqAutoValue) || '',
valueProp = allBindings.jqAutoSourceValue,
inputValueProp = allBindings.jqAutoSourceInputValue || valueProp;
//if we are writing a different property to the input than we are writing to the model, then locate the object
if (valueProp && inputValueProp !== valueProp) {
var source = unwrap(allBindings.jqAutoSource) || [];
var modelValue = ko.utils.arrayFirst(source, function(item) {
return unwrap(item[valueProp]) === modelValue;
}) || {};
}
//update the element with the value that should be shown in the input
$(element).val(modelValue && inputValueProp !== valueProp ? unwrap(modelValue[inputValueProp]) : modelValue.toString());
}
};
你会像这样使用它：
<input data-bind="jqAuto: { autoFocus: true }, jqAutoSource: myPeople, jqAutoValue: mySelectedGuid, jqAutoSourceLabel: 'displayName', jqAutoSourceInputValue: 'name', jqAutoSourceValue: 'guid'" />
更新：我在这里维护这个绑定的一个版本：https : //github.com/rniemeyer/knockout-jqAutocomplete
这是我的解决方案：
ko.bindingHandlers.ko_autocomplete = {
init: function (element, params) {
$(element).autocomplete(params());
},
update: function (element, params) {
$(element).autocomplete("option", "source", params().source);
}
};
用法：
<input type="text" id="name-search" data-bind="value: langName,
ko_autocomplete: { source: getLangs(), select: addLang }"/>
http://jsfiddle.net/7bRVH/214/ 与 RP 相比，它是非常基本的，但也许可以满足您的需求。
需要处理....
这两种解决方案都很棒（尼迈耶的粒度更细），但它们都忘记了处理！
他们应该通过以下方式销毁 jquery 自动完成（防止内存泄漏）来处理处置：
init: function (element, valueAccessor, allBindingsAccessor) {
....
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).autocomplete("destroy");
});
}
小改进，
首先这些是一些非常有用的技巧，谢谢大家的分享。
我正在使用Epstone发布的版本，并进行了以下改进：
向上或向下按时显示标签（而不是值） - 显然这可以通过处理焦点事件来完成
使用可观察数组作为数据源（而不是数组）
...
conf.focus = function (event, ui) {
$(element).val(ui.item.label);
return false;
}
...
顺便说一句，将minLength指定为 0 允许仅通过移动箭头键而无需输入任何文本来显示备选方案。
我在 JQuery UI 1.10.x 上尝试了Niemeyer 的解决方案，但自动完成框根本没有出现，经过一番搜索，我在这里找到了一个简单的解决方法。将以下规则添加到 jquery-ui.css 文件的末尾可以解决问题：
ul.ui-autocomplete.ui-menu {
z-index: 1000;
}
我还使用了 Knockout-3.1.0，所以我不得不用 ko.computed(...) 替换 ko.dependentObservable(...)
此外，如果您的 KO 视图模型包含一些数值，请确保更改比较运算符：从 === 到 == 和 !== 到 != ，以便执行类型转换。
我希望这对其他人有帮助