jQuery-UI - 多个自动填充字段共享结果

Question

我正在尝试构建一个包含多个自动填充字段的表单。 我正在使用jQuery-ui 1.8.21通过.autocomplete绑定进行自动完成。 我有5个不同的字段，它们都绑定了自动完成，并且每个字段都在页面末尾将其建议发送到表单之外的不同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开始打字，对于更远的匹配结果也显示在* b_complete *以及结果的bfield。

我尝试将cacheLength设置为0或1，并对不同的事件（ 搜索，打开，关闭，选择 ）使用flushCache（ ），但没有成功。

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

Answer 1

你需要使你的$('ul.ui-autocomplete')唯一的，例如，使用另一个类定义或“id”，这样它就是$('ul.ui-autocomplete#a')和$('ul.ui-autocomplete#b')