jQuery How to iterate through autocomplete and set title and display it on hover

Question

How can i loop through a dynamic list created by jquery autocomplete plugin... i need to loop through each element in the list and set the title of each value listed in the menu...the title should be the same name as the product name...

the reason for doing this is because some text in the list is hidden using

overflow:hidden; style...

so when the user hovers over any element the javascript has to set the current name of the product to the tile attribute..so that when hovering it display the full product name...

How can i do this....

the code so far i tried,

         jQuery.each(availableTags, function(index,value) {
             this.attr().title = document.getElementById("#").innerHtml;
         });

and this,

         jQuery.each("#autocompid", function(index,value) {
             var value = $(this).val();
             $("#autocompid ul li").attr(title,value));
         });

and my autocomplete like this...

http://jsfiddle.net/fewds/HwchC/8/

Answer 1

try this code after your autocomplete was bind

$("#autocompid").data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<a/>").html(item.label).attr("title", item.label))
                .appendTo(ul);
        };

_renderItem is a function of autocomplete plugin and we are overriding that function here.