Jquery Autocomplete for 2 input field (same class)

Question

I have two input fields like this:

Answer 1

It's works for me!!! http://www.arctickiwi.com/blog/jquery-autocomplete-labels-escape-html-tags

(Just add code to your Javascript somewhere and your HTML tags won’t be escaped anymore in Autocomplete)

Answer 2

Very nice solution with respect to:

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

The purpose of calling auto-complete with the same class is when you want to have the same help list to show up in several similar fields.

Answer 3

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:

<div id="a"></div>
<div id="b"></div>
<div id="out"></div>

And this jQuery:

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

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

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

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.