2

我正在使用如何创建自动完成组合框？

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

例如，如果用户键入“smi”，自动完成列表将显示以“smi”开头的史密斯和其他姓氏，但是，如果他们没有从列表中选择一个选项，我只想将我的 observable 字段的值设置为是'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);
    }
}

我还发现自动完成列表中的第一项被自动选择，但随后通过设置 autofocus: false 解决了我的问题，例如，

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

1 回答 1

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

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

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

于 2013-04-11T09:41:34.603 回答