Question

I am retrieving some results from an XML file and on the autosuggest I am trying to add some html code as such:

London, <br/>
United Kingdom

My code is this:

$.ajax({
                url: "veh.xml",
                dataType: "xml",
                success: function( xmlResponse ) {
                    var data = $( "geoname", xmlResponse ).map(function() {
                        return {
                            value: $( "reg", this ).text() 
                                   + '<br/>'
                                   + $( "model", this ).text()
                        };
                    }).get();
                    $( "#mainsearch" ).autocomplete({
                        source: data,
                        minLength: 0,
                        select: function( event, ui ) {
                            log( ui.item ?
                                "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
                                "Nothing selected, input was " + this.value );
                        }
                    });
                }
            });

and I get this result instead:

London,<br/>United Kingdom

I am trying to create a list effect.

My xml looks like this:

<geoname>
    <model>London</model>
    <reg>United Kingdom</reg>
    </geoname>


<geoname>
    <model>Paris</model>
    <reg>France</reg>
    </geoname>

Answer 1

You get this result :

London,<br/>United Kingdom

Because the default render use by the autocomplete was an li element and the data was just put in as text, not as html.

So, to change the render, you have to override the default render item and to add data in you item.

$.ajax({
    url: "veh.xml",
    dataType: "xml",
    success: function( xmlResponse ) {

        var data = $( "geoname", xmlResponse ).map(function() {
            return {
                value: $( "reg", this ).text() + '-' + $( "model", this ).text(),
                reg: $( "reg", this ).text(),
                model: $( "model", this ).text()
            };}).get();

        $( "#mainsearch" ).autocomplete({
            source: data,
            minLength: 0,
        focus: function( event, ui ) {
            $( "#mainsearch" ).val( ui.item.label );
            return false;
        },
            select: function( event, ui ) {
                log( ui.item ?
                     "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
                     "Nothing selected, input was " + this.value );
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li class='ui-menu-item' role='menuitem'></li>" )
                   .data( "item.autocomplete", item )
                   .append( "<a>" + item.reg + "<br />" + item.model +"</a>")
                   .appendTo( ul );
        };
    }
});

You have an example on the jQuery-UI Autocomplete presentation, with “custom data and display” : http://jqueryui.com/demos/autocomplete/#custom-data

Browse source of the demo and you’ll find an other example.

Hope my answer could help you to solve part of your problem.