Javascript 如何创建自动完成的组合框？

有人知道用淘汰JS模板创建自动完成组合框的最佳方法吗

我有以下模板：

...
...        

有时，这个列表很长，我想让Knockout与jQuery autocomplete或一些简单的JavaScript代码配合使用，但几乎没有成功

---

此外，jQuery.Autocomplete需要一个输入字段。有什么想法吗？

这是我编写的jQuery UI自动完成绑定。它旨在镜像

选项

，

选项文本

，

选项值

，

值

绑定范例，这些范例与选择元素一起使用，并添加了一些内容（您可以通过AJAX查询选项，并且可以区分输入框中显示的内容与弹出的选择框中显示的内容

您不需要提供所有选项。它将为您选择默认值

下面是一个没有AJAX功能的示例：

下面是相同的示例，其中有一个按钮使其更像一个组合框：

下面是一个示例，其中包含通过AJAX检索的选项：

你会像这样使用它：

<input data-bind="jqAuto: { autoFocus: true }, jqAutoSource: myPeople, jqAutoValue: mySelectedGuid, jqAutoSourceLabel: 'displayName', jqAutoSourceInputValue: 'name', jqAutoSourceValue: 'guid'" />

---

更新：我在这里维护这个绑定的一个版本：

这里是我编写的jQuery UI自动完成绑定。它旨在镜像

选项

，

选项文本

，

选项值

，

值

绑定范例，用于添加一些选择元素（您可以通过AJAX查询选项，并且可以区分输入框中显示的内容与弹出的选择框中显示的内容

您不需要提供所有选项。它将为您选择默认值

下面是一个没有AJAX功能的示例：

下面是相同的示例，其中有一个按钮使其更像一个组合框：

下面是一个示例，其中包含通过AJAX检索的选项：

你会像这样使用它：

<input data-bind="jqAuto: { autoFocus: true }, jqAutoSource: myPeople, jqAutoValue: mySelectedGuid, jqAutoSourceLabel: 'displayName', jqAutoSourceInputValue: 'name', jqAutoSourceValue: 'guid'" />

更新：我正在此处维护此绑定的一个版本：

以下是我的解决方案：

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 }"/>

与RP相比，它非常基本，但可能满足您的需求。

以下是我的解决方案：

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 }"/>

与RP相比，它非常基本，但可能满足您的需求。

需要处理

这两种解决方案都很好（Niemeyer的粒度要细得多），但它们都忘记了处理

他们应该通过以下方式销毁jquery autocomplete（防止内存泄漏）来处理处置：

init: function (element, valueAccessor, allBindingsAccessor) {  
....  
    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).autocomplete("destroy");
    });
}

需要处理

这两种解决方案都很好（Niemeyer的粒度要细得多），但它们都忘记了处理

他们应该通过以下方式销毁jquery autocomplete（防止内存泄漏）来处理处置：

init: function (element, valueAccessor, allBindingsAccessor) {  
....  
    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).autocomplete("destroy");
    });
}

小的改进

首先，这些是一些非常有用的提示，谢谢大家分享

我使用的是爱普斯通发布的版本，有以下改进：

按向上或向下键时显示标签（而不是值）-显然，这可以通过处理焦点事件来实现

使用可观察数组作为数据源（而不是数组）

按照George的建议添加了一次性处理器

顺便说一句，将minLength指定为0，只需移动箭头键即可显示备选方案，而无需输入任何文本。

细微改进

首先，这些是一些非常有用的提示，谢谢大家分享

我使用的是爱普斯通发布的版本，有以下改进：

按向上或向下键时显示标签（而不是值）-显然，这可以通过处理焦点事件来实现

使用可观察数组作为数据源（而不是数组）

按照George的建议添加了一次性处理器

---

顺便说一句，将minLength指定为0可以通过只移动箭头键而不必输入任何文本来显示备选方案。

Niemeyer的解决方案非常好，但是我在尝试在模式内部使用autocomplete时遇到了一个问题。autocomplete在模式关闭事件中被破坏（未捕获错误：在初始化之前无法在autocomplete上调用方法；尝试调用方法“option”）我通过在绑定的subscribe方法中添加两行来修复此问题：

mappedSource.subscribe(function (newValue) {
    if (!$(element).hasClass('ui-autocomplete-input'))
         $(element).autocomplete(options);
    $(element).autocomplete("option", "source", newValue);
});

---

Niemeyer的解决方案很棒，但是我在尝试在模式内使用autocomplete时遇到了一个问题。autocomplete在模式关闭事件中被破坏（未捕获错误：无法在初始化之前调用autocomplete上的方法；尝试调用方法“option”）。我通过在绑定的subscribe方法中添加两行来修复它：

mappedSource.subscribe(function (newValue) {
    if (!$(element).hasClass('ui-autocomplete-input'))
         $(element).autocomplete(options);
    $(element).autocomplete("option", "source", newValue);
});

我尝试使用JQuery UI 1.10.x，但自动完成框根本没有显示，在进行一些搜索后，我找到了一个简单的解决方法。将以下规则添加到JQuery-UI.css文件的末尾可以解决此问题：

ul.ui-autocomplete.ui-menu {
  z-index: 1000;
}

我还使用了Knockout-3.1.0，所以我必须用ko.computed（…）替换ko.dependentObservable（…）

此外，如果KO视图模型包含一些数值，请确保更改比较运算符：从===到==和！==到！=，以便执行类型转换

我希望这对其他人有所帮助

我尝试使用JQuery UI 1.10.x，但在搜索之后，自动完成框根本没有出现，我找到了一个简单的解决方法。将以下规则添加到JQuery-UI.css文件的末尾可以解决此问题：

ul.ui-autocomplete.ui-menu {
  z-index: 1000;
}

我还使用了Knockout-3.1.0，所以我必须用ko.computed（…）替换ko.dependentObservable（…）

此外，如果KO视图模型包含一些数值，请确保更改比较运算符：从===到==和！==到！=，以便执行类型转换

我希望你不会