如何在自动完成中添加页脚 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>

我的代码隐藏在 return 列表卡中

[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 link 中找到 link 之一的答案丽塔在你的问题的评论中给出了（如果你遵循那个......）。该问答侧重于更改项目而不是添加到菜单。

"_renderMenu"扩展方法"controls building the widget's menu."

所以我用它来做这个：

$("#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

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

how to add footer in auto complete jquery

html

asp.net

jquery

jquery-ui-autocomplete