Jquery Autocomplete for 2 input field (same class)

Question

I have two input fields like this:

Answer 1

Your problem is right here:

}).data("autocomplete")._renderItem

When the autocomplete widget binds to an element, each element gets its own distinct autocomplete data value. Then, when you grab the .data('autocomplete') to set the _renderItem function, you'll only get one of the two distinct data objects; so the first text field gets your custom renderer but the second one stays with the default renderer.

You can see what's going on by playing with this HTML:

And this jQuery:

var $out = $('#out');

$out.append('
Setting both to {a:"a"}
');
$('#a').data('pancakes', { a: 'a' });
$('#b').data('pancakes', { a: 'a' });
$out.append('
#a.a = ' + $('#a').data('pancakes').a + '
');
$out.append('
#b.a = ' + $('#b').data('pancakes').a + '
');

$out.append('
Setting "div".a to "x"
');
$('div').data('pancakes').a = 'x';
$out.append('
#a.a = ' + $('#a').data('pancakes').a + '
');
$out.append('
#b.a = ' + $('#b').data('pancakes').a + '
');

And a live demo: http://jsfiddle.net/ambiguous/DM8Wv/2/

Check what the jsfiddle does and you should see what's going on.

You can iterate through the autocomplete fields and set the _renderItem individually with something like this (untested code):

$(".accountCode").autocomplete({
    //...
}).each(function() {
    $(this).data('autocomplete')._renderItem = function(ul, item) {
        //...
    };
});

You could also bind the autocomplete widget to each element individually but keeping it all together and using each to set the _renderItem keeps everything nicely organized.