如何将图像添加到文本框自动完成源

Question

我正在使用jquery自动完成功能来加载文本框中的值：

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

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

实际上，我有超过1000个城市，我将把它们存储在数据库中并通过模型发送到视图。此外，为了更愉快的外观，我想将国旗添加到我的文本框的下拉列表中，如：

我该怎么办？如何将图像添加到自动裁剪源？

Answer 1

我在我的解决方案中覆盖了_renderMenu函数：

    _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"] + "' /> ");
    });
},

对我来说没问题：）

Answer 2

您必须编辑自动填充源的html以添加标记图片，请查看此问题add image to jQuery UI autocomplete remote source with cache