JQuery UI Autocomplete's keyboard events

Question

I've overridden AC's HTML to use a table, the mouseover hover effect and select works the same but key up and key down doesn't have any effect now. How can I make key events work with an AC table?

globalSearch._renderItem = function(table, item) {
    return $( '<tr class="result-row"></tr>' )
                .data( "item.autocomplete", item )
                .append('<td class="ac-search-col"></td>'+
                        '<td class="result-img-col"><img src="x" /></td>'+
                        '<td class="result-info">'+item.val'</td>')
                        .appendTo( table );
});

globalSearch._renderMenu = function(ul, items) {
        var self = this;
        ul.append('<table class="ac-search-table"></table>');
            $.each( items, function( index, item ) {
            self._renderItem( ul.find("table"), item );
        });
};

Edit:

Here is the fiddle: http://jsfiddle.net/CpTAh/24/

Any chance you can put an example of what you have on JSFiddle? — Andrew Whitaker, Jan 03 '13 at 22:36
Having a basic example to work from would be a great help here. I'm having trouble getting your render item and menu functions working in a fiddle. — gnarf, Jan 15 '13 at 17:59
jQuery UI Menu works best on `
` and `
` - Is there any chance you could just use `display: table-cell` in your CSS, or other CSS (constant width's and floats?) and forgoe the use of a `` ? — gnarf, Jan 16 '13 at 14:18
That could work I guess.. basically I just need something like what I've got in the fiddle.. I remember I was initially trying to use table-cell but couldn't get the css working how I needed — el_pup_le, Jan 16 '13 at 14:20

score 3 · Accepted Answer · edited May 23 '17 at 10:24

I think it might be better to keep the autocomplete markup and just modify the rendered output to include your extra data in the _renderItem function (demo):

/* see http://jqueryui.com/autocomplete/#custom-data */
var availableTags = [
    {
        value: "Item1",
        label: "Item 1",
        desc : "Description for Item 1",
        icon : "http://mysite.com/images/item1.jpg"
    },
    {
        ...
    }
];

$("input").autocomplete({
    source: availableTags
})
.data('autocomplete')._renderItem = function(ul, item) {
    return $( '<li>' )
        .data( "item.autocomplete", item )
        .append('<a><span class="ac-search-col"></span><span class="result-img-col"><img src="' + item.icon + '" /></span><span class="result-info">' + item.label + '<p>' + item.desc + '</p></span>')
        .appendTo( ul );
};

Also check out these links:

score 2 · Answer 2 · answered Jan 16 '13 at 15:39

Here you go: http://jsfiddle.net/CpTAh/25/
There was two things that were disabling the keyboard events:

Each item element must be directly under the ul, you had only one: the table. So I removed it and just added the css class to the ul and the <tr> elements directly in the ul (which is not very clean but works).
You have to have an <a> element in each item.

Edits made:

  globalSearch._renderMenu = function(ul, items) {
        var self = this;
        ul.addClass("ac-search-table");   // <= Here adding the class to the ul
            $.each( items, function( index, item ) {
            self._renderItem( ul, item );  // No table, directly the ul
        });
    };

and:

'<td class="result-info"><a>'+item.value+'<br>'+item.rating+'</a></td>' // added an <a> element

However, your code breaks the normal selection css, so you can't see the highlighting of the selected element when using the keyboard to select. I will let you correct this yourself.

pretty sure those `` will go crazy trying to live outside a body in SOME browser... *shrug* +1 tho — gnarf, Jan 17 '13 at 00:07
@gnarf true. Actually I was surprised myself that it works in most modern browsers and that it doesn't seem to make any problem. — qwertzguy, Jan 22 '13 at 10:57

JQuery UI Autocomplete's keyboard events

2 Answers2