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

【问题标题】：How to add image to the textbox autocomplete source如何将图像添加到文本框自动完成源
【发布时间】：2013-01-10 12:12:29
【问题描述】：

我正在使用 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多个城市，我打算将它们存储在数据库中并通过模型发送到视图。此外，为了更令人愉悦的外观，我想将国旗添加到我的文本框的下拉列表中，例如：

我该怎么做？如何将图像添加到自动完成源？

【问题讨论】：

标签： jquery asp.net-mvc-3 autocomplete html.textbox

【解决方案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"] + "' /> ");
    });
},

对我来说没问题:)

【讨论】：

非常感谢。我试图覆盖 _RenderItem 函数并且它有效！请看ljsfiddle.net 我还有一个问题：如何选择下拉菜单项并在城市附近的文本框中显示国家标志？
以前从未这样做过。也许输入之外的图像更好：看jqueryui.com/autocomplete/#custom-data
这比我想象的要容易。刚刚为项目选择事件添加了文本框背景图像UPDATED jsfiddle.net

【解决方案2】：

你必须编辑你的自动完成源的html来添加标志图像，看看这个问题add image to jQuery UI autocomplete remote source with cache

【讨论】：