javascript - jQuery-UI - 多个自动完成字段共享结果

Question

我正在尝试构建一个包含多个自动完成字段的表单。我正在使用 jQuery-ui 1.8.21 通过 .autocomplete 绑定(bind)执行自动完成。我有 5 个不同的字段，它们绑定(bind)了自动完成功能，每个字段都将他们的建议发送到页面末尾表单外的不同 div。

表单如下所示:

<form>
    <input type="text" name="afield" />
    <input type="text" name="bfield" />
</form>
<div id="a_complete">
</div>
<div id="b_complete">
</div>

像这样的 jQuery 代码:

$(function(){
    $("[name=afield]").autocomplete({
        source: "/data/source/a",
        open: function(event, ui) {
        $('ul.ui-autocomplete')
            .removeAttr('style').hide().appendTo('#a_complete').show();
        }
    });
    $("[name=bfield]").autocomplete({
        source: "/data/source/b",
        open: function(event, ui) {
        $('ul.ui-autocomplete')
            .removeAttr('style').hide().appendTo('#b_complete').show();
        }
    });
});

问题在于，当我开始输入 bfield 时，afield 的匹配结果也显示在 *b_complete* 中，>场。

我尝试将 cacheLength 设置为 0 或 1，并在不同的事件(搜索、打开、关闭、选择)上使用 flushCache() ) 没有成功。

这只是一个表面问题，因为当我点击结果时它会更新正确的字段，而当我使用箭头键遍历结果时它们只会返回正确字段的结果。

Answer 1

您还需要使您的 $('ul.ui-autocomplete') 具有唯一性，例如使用另一个类定义或“id”，以便它是 $( 'ul.ui-autocomplete#a') 和 $('ul.ui-autocomplete#b')