如何在自动完成jquery中添加页脚

Question

我的asp代码使用jquery自动完成来调用GetCities方法

    <div><h1>AutoComplete Textbox</h1>
City:
<asp:TextBox ID="txtCity" Width="403px" runat="server"></asp:TextBox>

<script type="text/javascript"> 
    $(function () {
        $("#txtCity").autocomplete({
            source: function (request, response) {
                var param = { cityName: $('#txtCity').val() };
                $.ajax({
                    url: "/WebForm1.aspx/GetCities",
                    data: JSON.stringify(param),
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item.name,
                                url: item.img
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1
        }) 
        .data("ui-autocomplete")._renderItem = function (ul, item) {
            var bla = $('#txtCity').val();
            var inner_html = '<a><div class="list_item_container"><div class="image" style=\"float:left;\"><img style=\"height: 80px;\" src="' + item.url + '"></div><div style=\"word-break: break-all;padding-left: 40%; padding-top: 7%\">' + item.value + '</div></div><div style=\"clear:both;\"></div></a>';
            var bottom_htm = '<hr>View all results for "' +  bla + '"'
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append(inner_html)
                .appendTo(ul);
        }; 
    }); 
</script>

我隐藏的代码返回一个列表卡

[WebMethod]
    public static List<Card> GetCities(string cityName)
    {
        List<Card> cities = new List<Card>();

        cities.Add(new Card("MACY'S EGIFT CARD", "http://static2.cardlabcorp.com/Product+images/eGift/Macys-GCM.jpg"));
        cities.Add(new Card("TARGET EGIFT CARD", "http://static2.cardlabcorp.com/Product+images/eGift/Target-GCM.png"));
        cities.Add(new Card("TARGET EGIFT CARD", "http://static2.cardlabcorp.com/Product+images/eGift/Target-GCM.png"));
        cities.Add(new Card("TARGET EGIFT CARD", "http://static2.cardlabcorp.com/Product+images/eGift/Target-GCM.png"));
        cities.Add(new Card("TARGET EGIFT CARD", ""));
        if(string.IsNullOrEmpty(cityName)) return cities;
        return cities.Where(x => x.name.ToUpper().Contains(cityName.ToUpper())).ToList();

    }

我想将 bottom_htm 添加到下拉列表自动完成的页脚中，但我不知道该怎么做，请帮我解决这个问题，谢谢。

Answer 1

我知道这个问题已经有一段时间了，但我有兴趣在自动完成菜单中添加页脚。我想我会添加我的解决方案。

我使用了来自 JQuery UI 自动完成示例的示例源代码，该示例源代码位于 documentation 链接中，该链接提供在 Rita 在您的问题的 cmets 中给出的链接之一的答案中（如果您遵循了...）。该问题和答案的重点是更改项目而不是添加到菜单中。

"_renderMenu" 扩展方法“控制构建小部件的菜单。”

所以我用它来做这个：

$("#tags").autocomplete({
    source: availableTags
})
.autocomplete("instance")._renderMenu = function (ul, items) {
    var that = this;
    $.each(items, function (index, item) {
        that._renderItemData(ul, item);
    });

    //Alter the look of the list items
    $(ul).find("li:odd").addClass("acmenu_item_odd");
    $(ul).find("li").addClass("acmenu_item");

    //Append a Footer list item to the menu
    $(ul).append(
        "<li><div class='acmenu_footer'>This is my Footer</div></li>"
    );
};

我会修改您问题中的代码，但我不太确定您将使用它。

这是我的 JSFiddle：JQuery UI Autocomplete Menu Footer