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 时， afield 的匹配结果也会显示在* b_complete *以及 bfield

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

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

Answer 1

您需要将$('ul.ui-autocomplete')设为唯一，例如，使用其他类定义或“id”，以便$('ul.ui-autocomplete#a')和$('ul.ui-autocomplete#b')

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

1 个答案: