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在您的问题评论中给出的一个链接（如果您遵循该...）。这个问题和答案集中在改变项目而不是添加到菜单上。

"_renderMenu"扩展程序＆＃34;控制构建小部件的菜单。＆＃34;

所以我用它来做到这一点：

$("#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中添加页脚

1 个答案: