Losing jQuery autocomplete "Select" functionality when implementing custom HTML menu

Question

I am trying to implement jQuery autocomplete with a custom drop down menu. I am able to customize menu items with the data()._renderItem method (commented out) ,but this disables the menu "Select" functionality. If I attempt to customize menu items via the "label" field The "Select" functionality works but my menu item HTML is interpreted as a string. Can anyone suggest a clean way of accomplishing this.

$("input#selectedInput")

.bind("autocompleteselect", function (event, ui) {
alert("Sel item " + JSON.stringify(ui.item.json));
})



.autocomplete({
appendTo: "#list",
source: function (request, response) {
    //alert("success");
    $.ajax({
        //url: "http://itunes.apple.com/search?term=jack+johnson&entity=musicTrack",
        url: "Example REST URL",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
        },

        success: function (data) {
            response($.map(data.results, function (item) {
                itunesJson = item;
                return {
                    label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>",
                }
            }));
        },
    });
}
})
/*
        .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append("<img src='"+item.value+"' alt='no photo'/>"+ item.label)
            .appendTo( ul );
    };
        */

alexarsh · Answer 1 · 2012-04-28T10:33:12.777

0

Try to read here: http://www.devbridge.com/projects/autocomplete/jquery/. This is what I use when I need autocomplete. It's really easy to configure. And please tell me, if it doesn't fit your needs.

edited Apr 28 '12 at 10:33

answered Apr 28 '12 at 10:22

alexarsh

5,123
12
42
51

OP is trying to make a dropdownlist using jquery ui autocomplete here – naveen Apr 28 '12 at 11:01
Hi Alex, thank you for your response. I was however looking for a solution that was restricted jQuery Mobile's autocomplete library (i.e. no further plugins). – Ben Pearce Apr 28 '12 at 22:58
Ok. So how about this one: http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available – alexarsh Apr 29 '12 at 08:11

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

One simple workaround will be to HTML Encode list using JavaScript after label has been assigned on success call

var elm = $("#list");
elm.html(elm.text());

Working fiddle : http://jsfiddle.net/naveen/yRwH7/

edited May 23 '17 at 12:11

Community

1
1

answered Apr 28 '12 at 12:31

naveen

53,448
46
161
251

Thanks for the code. This renders the menu properly but the autocomplete "select" event does not trigger. – Ben Pearce Apr 28 '12 at 22:55

score 0 · Accepted Answer · answered May 24 '12 at 22:04

0

try placing anchor tags around your image in the return html eg. ...

.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
         .data( "item.autocomplete", item )
         .append("<a><img src='"+item.value+"' alt='no photo'/></a>"+ item.label)
         .appendTo( ul );

answered May 24 '12 at 22:04

zeeside

16
2

Actually you have to have anchor tags as your root node in your LI for custom autocomplete to function at all. – kamasheto Sep 09 '12 at 14:00

Losing jQuery autocomplete "Select" functionality when implementing custom HTML menu

3 Answers3