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:

enter image description here

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

score 2 · Accepted Answer · answered Jan 10 '13 at 12:17

2

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 :)

answered Jan 10 '13 at 12:17

Saram

1,500
1
18
35

Thanks a lot. I tried to override _RenderItem function and it works! Please, have a look at [ljsfiddle.net](http://jsfiddle.net/RsTvq/) And I have one more question: How to select drop-down menu item and make visible country flag in textbox near the sity? – mbigun Jan 11 '13 at 08:53
never did it before. Maybe image outside of input is better: look http://jqueryui.com/autocomplete/#custom-data – Saram Jan 11 '13 at 09:31
1

This is easier than I thought. Just added textbox background-image for the item select event [UPDATED jsfiddle.net](http://jsfiddle.net/RsTvq/1/) – mbigun Jan 11 '13 at 12:37

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

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

edited May 23 '17 at 11:48

Community

1
1

answered Jan 10 '13 at 12:18

Buzz

6,030
4
33
47

How to add image to the textbox autocomplete source

2 Answers2