I can't get custom output for jQueryUI Autocomplete menu items to work

Question

So I'm trying to pass values from an object parsed from a JSON string into a jQueryUI Autocomplete thing, and I'm trying to grab three different values from a 2-dimentional array, as in:

[{1:a1, 2:b1,3:c1,4:d1},{1:a1, 2:b1,3:c1,4:d1}]

Thats just a representation of the object, but I need three values in one result item.

So no matter what I try, one of two things happen:

1) When I use the following code, modified from the jQueryUI site , \\along with a css file from the jQueryUI site, I get the following result:

.data("ui-autocomplete")._renderItem = function(ul, item) {
    return $("<li>")
    .attr("data-value", item[1])
    .append("<a>")
    .append("<span class='cardName'>" + item[1] + "</span>") 
    .append("<span class='setName'>" + item[3] + "</apan>")
    .append("<span class='rarity'>" + item[2] + "</span>")
    .append("</a>")
    .appendTo(ul);
}

This is my own css that I used as well:

.cardName           { float:left; width:70%; font-weight:bold; text-align:left; }
.setName            { float:right; width:10%; text-align:right; }
.rarity             { float:right; width:15%; text-align:right; }

---

This is what it looks like:

Which looks fine at first, but the selection areas are only a few pixels tall, and don't match up with the text at all.

Then, when I try to use the following :

.data("ui-autocomplete")._renderMenu = function(ul, item) {
  var that = this;
  $.each( items, function( index, item ) {
    that._renderItemData( ul, item ); //(Also tried that._renderItem(ul,item))
  });
}

All the text disappears, the selection areas are still way too small, but the mouseover selection seems a lot smoother. I'm trying to find a way to keep that smoothness, but each menu item needs to be the right size and show the text. I've tried searching Google, and I found some stuff about overriding the _renderItem and _renderMenu functions, but I'm really new to JavaScript and although I tried and looked stuff up, I might not have done it correctly because it still didn't work.

I'm hoping someone can show me how to get this to work correctly.

Answer 1

This isn't how .append works. .append("<a>") actually immediately appends an end tag (in other words, it's equivalent to .append("<a></a>") . You need to build an anchor tag containing the spans and then append that to the li that you end up returning:

.data("ui-autocomplete")._renderItem = function(ul, item) {
    var href = $('<a />')
        .append("<span class='cardName'>" + item[1] + "</span>") 
        .append("<span class='setName'>" + item[3] + "</apan>")
        .append("<span class='rarity'>" + item[2] + "</span>");

    return $('<li />')
        .attr("data-value", item[1])
        .append(href)
        .appendTo(ul);
}

Example: http://jsfiddle.net/WP29E/145/