Using _renderItem kind of breaks autocomplete field

Question

I have a jQuery autocomplete field that's been working fine up until now. I decided to use _renderItem on it because I wanted to use some HTML in the results. Here's my code:

function prepareClientField() {

  var renderItemFunction = function(ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append(item.label)
      .appendTo(ul);
  };

  $("#client_name").autocomplete({
    source: clientNames,
    delay: 0
  }).data("autocomplete")._renderItem = renderItemFunction;

  $("#client_name").focus();
}

For reason, now, I can't use the up/down arrows in my autocomplete field. I can't even use the mouse to click an item in the results. Is there something else I need to do to make this actually work?

Answer 1

The autocomplete plugin relies heavily on the menu plugin which uses a elements internally. thus removing the a element from each item breaks the menu plugin.

You can either manually bucher up the menu plugin & try to get it to work, or you need to find another solution where the items have a a tag, but don't mess up your styles.