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')