How to add image to the textbox autocomplete source

Question

I'm using jquery autocomplete to load the values in the textbox:

@Html.TextBox("Cities", "", new { @id="tags" })

<script type="text/javascript">
$(function () {
        var availableTags = [
        "New York",
        "London",
        "Moscow",
        "Paris",
        "Berlin",
        "Madrid",
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

Actually, I have more than 1000 cities and I'm going to store them in the database and send to the view through the model. Also, for more enjoyable appearance I want to add country flag to the drop-down list of my textbox like:

How can I do it? How to add image to the autocomlete source?

Answer 1

I'm overriding _renderMenu function in my solution:

    _renderMenu: function( ul, items ) {
    var that = this;
    $.each( items, function( index, item ) {
        that._renderItemData( ul, item )
            .children("a")
            .attr("title", item.value["@tooltip"])
            .prepend("<img class='menu_button_img' src='" + item.value["@icon"] + "' /> ");
    });
},

Works ok for me :)

Answer 2

you have to edit html of your autocomplete source to add flag image ,look into this question add image to jQuery UI autocomplete remote source with cache