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

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