Question

我正在使用How to create an auto-complete combobox?

中提供的自定义绑定

我想允许用户从建议列表中选择一个值，或者输入一个不在建议列表中的值。如何将输入值输入我的可观察字段？

例如，如果用户输入'smi'，自动完成列表将显示Smith和其他以'smi'开头的姓氏，但是，如果他们没有从列表中选择一个选项，我只想设置我的值可观察的领域是'smi'。目前，设置可观察性的唯一方法是用户从建议列表中选择一个项目。

我有以下代码（HTML）：

<input type="text" data-bind="
                            value: surname,
                            jqAuto: { autoFocus: true },
                            jqAutoSource: surnames,
                            jqAutoQuery: surnameAutocomplete,
                            jqAutoValue: surname" 
            />

JavaScript视图模型（简化）：

var vm = {
    surnames: ko.observableArray(),
     surname: ko.observable(),
     surnameAutocomplete: function (searchTerm, result) {
        repository.surnameAutocomplete(searchTerm, result);
    };

解决方案：

我在两个地方修改了自定义绑定处理程序：

init：function - 添加了以下内容

    // New setting to allow / disallow a user to enter values that are in the autocomplete list.
    forceSelection = allBindings.jqAutoForceSelection;

选项更改功能 - 修改为以下

//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();

    // Start: new code, check new setting on whether to force user to make a selection
    if (!forceSelection) {
        writeValueToModel(currentValue);
        return;
    }
    // End: new code

    var matchingItem = ko.utils.arrayFirst(unwrap(source), function (item) {
        return unwrap(inputValueProp ? item[inputValueProp] : item) === currentValue;
    });

    if (!matchingItem) {                
        writeValueToModel(null);
    }
}

我还发现自动完成列表中的第一项是自动选择的，但后来通过设置自动对焦来注意：false解决了我的问题，例如，

<input type="text" data-bind="                                
                            jqAuto: { autoFocus: false }, /* This fixes the auto select issue */
                            jqAutoSource: surnames,
                            jqAutoQuery: surnameAutocomplete,
                            jqAutoValue: surname,
                            jqAutoForceSelection: false"
            />

Answer 1

如果仔细查看您正在使用的绑定处理程序，您会注意到这一部分：

//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);
        }

绑定处理程序的这一部分基本上是检查用户在文本字段中输入的文本是否与自动完成下拉列表中的内容匹配，如果不匹配，则会清除模型值（这听起来像你的想要改变）。

您可以尝试删除此部分或将其扩展以适合您的目的。

Knockout jQueryUI自动完成如果没有从自动完成列表中选择任何内容，如何使用输入值

1 个答案: