Question

I’m using autocomplete in jQuery as below :

$("#myDiv").autocomplete({
}

This is the standard jQuery auto complete functionality :http://jqueryui.com/demos/autocomplete/

Can the generated li tag be modified to include an extra tag ?

<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>
<a class="ui-corner-all" tabindex="-1">Erlang</a>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>

becomes (added tester) :

<li class="ui-menu-item" mytag="tester" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>
<a class="ui-corner-all" tabindex="-1">Erlang</a>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>

Answer 1

Use the focus callback function. Something like this…

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  $("#tags").autocomplete({
    source: availableTags,
    focus: function(event, ui) {
        $(".ui-autocomplete li").attr("mytag", "tester");
    }
  });
});​

Check this – http://jsfiddle.net/gtND8/