1

我正在尝试构建一个包含多个自动完成字段的表单。我正在使用 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()没有成功。

这只是一个装饰性问题，因为当我单击结果时，它会更新正确的字段，而当我使用箭头键浏览结果时，它们只会返回正确字段的结果。

4

1 回答 1

4

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

于 2012-06-12T17:54:41.010 回答