jQuery-UI - Multiple autocomplete fields shared results

Question

I am trying to build a form with multiple autocompleted fields. I am using jQuery-ui 1.8.21 to do the autocomplete via the .autocomplete binding. I have 5 different fields which have autocomplete bound to them, and each send their suggestions to a different div outside of the form, at the end of the page.

the form looks like this:

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

the jQuery code like this:

$(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();
        }
    });
});

The problem with this is that when I begin typing in bfield , the matched results for afield are also displayed in *b_complete* as well as the results for bfield .

I have tried setting cacheLength to 0 or 1, and use flushCache() on different events ( search, open, close, select ) to no success.

This is only a cosmetic issue though as when I click on a result it will update the proper field, and when I walk through the results with the arrow keys they only return the results for the correct field.

Answer 1

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