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

标签: Asp.net jQuery HTML
发布时间: 2017/3/26 4:35:53
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我的 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 添加到页脚下拉列表自动完成,但我不知道怎么办呢请帮我解决这个问题,谢谢你提前。

解决方法 1:

我知道它有一阵子了,因为这问,却感兴趣将页脚添加到自动完成菜单。我以为我会加我的解决方案。

我用从发现中的答案 (如果你跟随那...) 丽塔在你的问题的评论而给予的环节之一提供的文档链接在 JQuery UI 自动完成示例的示例源代码。问题和答案侧重于改变的项目,而不是添加到菜单中。

"_RenderMenu"扩展方法"构建widget的菜单控件"。

所以,我用它来执行此操作︰

$("#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 自动完成菜单页脚

官方微信
官方QQ群
31647020