Clever Geek Handbook

How to add footer to auto full jquery

My asp code using jquery autocomplete to call GetCities method

    <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 works, return the list card

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

        cities.Add(new Card("MACY 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 to the footer of the autocomplete dropdown, but I don't know how. Help me solve this problem, thanks for the promotion.

+3


source to share


2 answers


I know it has been a while since this was asked, but I was curious to add a footer to the autocomplete menu. I thought I would add my solution.

I used the source of the example from the jQuery UI autocomplete example found in the documentation provided in the answer to one of the links provided by Rita in the comments to your question (if you followed this ...). This question and answer has focused on modifying items rather than adding to menus.

The "_ renderMenu" extension method "manages the creation of the widget menu."

So I used it for 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 adapt the code in your question, but I'm not really sure where you are going with it.

Here is my JSFiddle: JQuery Autocomplete Menu Footer

0


source


In response to Gazzi (I can't add a comment yet): I found the same solution, but it throws an "Uncaught TypeError: Cannot read property 'value' of undefined" when hovering over the footer. Check your JSFiddle console:

Uncaught TypeError: Cannot read property 'value' of undefined
at $.(fiddle.jshell.net/Gazzi/auzs02u7/21/show/anonymous function).(anonymous function).menufocus (https://code.jquery.com/ui/1.11.4/jquery-ui.js:3012:50)
at HTMLUListElement.handlerProxy (jquery-ui.js:726)
at HTMLUListElement.dispatch (jquery-1.10.2.js:5095)
at HTMLUListElement.elemData.handle (jquery-1.10.2.js:4766)
at Object.trigger (jquery-1.10.2.js:5007)
at HTMLUListElement.<anonymous> (jquery-1.10.2.js:5691)
at Function.each (jquery-1.10.2.js:657)
at init.each (jquery-1.10.2.js:266)
at init.trigger (jquery-1.10.2.js:5690)
at $.(fiddle.jshell.net/Gazzi/auzs02u7/21/show/anonymous function).(anonymous function)._trigger (https://code.jquery.com/ui/1.11.4/jquery-ui.js:813:16)


I am still looking for a clean solution to this open ended question.

0


source






More articles:


All Articles