how to add footer in auto complete jquery

Question

My asp Code using jquery autocomplete to call method 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>

and my code behide return a list card

[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();

    }

i want to add bottom_htm into footer of dropdown list autocomplete but i don't know how to do it pls help me to solve this problem, thanks for advance.

May below link helpfull to you http://stackoverflow.com/questions/3488016/using-html-in-jquery-ui-autocomplete http://stackoverflow.com/questions/7746679/jquery-autocomplete-custom-html-for-result-listing — Rita Chavda, Jun 10 '15 at 11:28

score 0 · Accepted Answer · answered Oct 29 '15 at 21:00

I know it has been a while since this was asked, but I was interested in adding a footer to an autocomplete menu. I thought I would add my solution.

I used the example source from a JQuery UI Autocomplete example found at a documentation link provided in the answer to one of the links given by Rita in the comments of your question (if you followed that...). That question and answer focused on altering the items rather than adding to the menu.

The "_renderMenu" extension method "controls building the widget's menu."

So I used it to do this:

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

I would have adapted the code in your question, but I'm not quite sure where you were going with it.

Here is my JSFiddle: JQuery UI Autocomplete Menu Footer

how to add footer in auto complete jquery

1 Answers1