title: how to add footer in auto complete jquery
body: <p>My asp Code using jquery autocomplete to call method GetCities</p>
  
  <pre><code>    &lt;div&gt;&lt;h1&gt;AutoComplete Textbox&lt;/h1&gt;
  City:
  &lt;asp:TextBox ID="txtCity" Width="403px" runat="server"&gt;&lt;/asp:TextBox&gt;
  
  &lt;script type="text/javascript"&gt; 
      $(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 = '&lt;a&gt;&lt;div class="list_item_container"&gt;&lt;div class="image" style=\"float:left;\"&gt;&lt;img style=\"height: 80px;\" src="' + item.url + '"&gt;&lt;/div&gt;&lt;div style=\"word-break: break-all;padding-left: 40%; padding-top: 7%\"&gt;' + item.value + '&lt;/div&gt;&lt;/div&gt;&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;&lt;/a&gt;';
              var bottom_htm = '&lt;hr&gt;View all results for "' +  bla + '"'
              return $("&lt;li&gt;&lt;/li&gt;")
                  .data("item.autocomplete", item)
                  .append(inner_html)
                  .appendTo(ul);
          }; 
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>and my code behide return a list card </p>
  
  <pre><code>[WebMethod]
      public static List&lt;Card&gt; GetCities(string cityName)
      {
          List&lt;Card&gt; cities = new List&lt;Card&gt;();
  
          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 =&gt; x.name.ToUpper().Contains(cityName.ToUpper())).ToList();
  
      }
  </code></pre>
  
  <p>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.</p>