title: Jquery UI Combobox and DropDownList
body: <p>I'm having problems with Jquery Jquery UI Combobox &amp; asp.net </p>
  
  <ol>
  <li>The DropDown is not working or render </li>
  <li><p>JavaScript error <code>"Uncaught TypeError: Cannot set property '_renderItem' of undefined" 'input.data("ui-autocomplete")._renderItem = function (ul, item)'</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      (function ($) {
          $.widget("ui.combobox", {
              _create: function () {
                  var input,
        that = this,
        wasOpen = false,
        select = this.element.hide(),
        selected = select.children(":selected"),
        value = selected.val() ? selected.text() : "",
        wrapper = this.wrapper = $("&lt;span&gt;")
          .addClass("ui-combobox")
          .insertAfter(select);
  
                  function removeIfInvalid(element) {
                      var value = $(element).val(),
          matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"),
          valid = false;
                      select.children("option").each(function () {
                          if ($(this).text().match(matcher)) {
                              this.selected = valid = true;
                              return false;
                          }
                      });
  
                      if (!valid) {
                          // remove invalid value, as it didn't match anything
                          $(element)
            .val("")
            .attr("title", value + " didn't match any item")
            .tooltip("open");
                          select.val("");
                          setTimeout(function () {
                              input.tooltip("close").attr("title", "");
                          }, 2500);
                          input.data("ui-autocomplete").term = "";
                      }
                  }
  
                  input = $("&lt;input&gt;")
        .appendTo(wrapper)
        .val(value)
        .attr("title", "")
        .addClass("ui-state-default ui-combobox-input")
        .autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response(select.children("option").map(function () {
                    var text = $(this).text();
                    if (this.value &amp;&amp; (!request.term || matcher.test(text)))
                        return {
                            label: text.replace(
                    new RegExp(
                      "(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" +
                      $.ui.autocomplete.escapeRegex(request.term) +
                      ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"
                    ), "&lt;strong&gt;$1&lt;/strong&gt;"),
                            value: text,
                            option: this
                        };
                }));
            },
            select: function (event, ui) {
                ui.item.option.selected = true;
                that._trigger("selected", event, {
                    item: ui.item.option
                });
            },
            change: function (event, ui) {
                if (!ui.item) {
                    removeIfInvalid(this);
                }
            }
        })
        .addClass("ui-widget ui-widget-content ui-corner-left");
  
                  input.data("ui-autocomplete")._renderItem = function (ul, item) {
                      return $("&lt;li&gt;")
          .append("&lt;a&gt;" + item.label + "&lt;/a&gt;")
          .appendTo(ul);
                  };
  
                  $("&lt;a&gt;")
        .attr("tabIndex", -1)
        .attr("title", "Show All Items")
        .tooltip()
        .appendTo(wrapper)
        .button({
            icons: {
                primary: "ui-icon-triangle-1-s"
            },
            text: false
        })
        .removeClass("ui-corner-all")
        .addClass("ui-corner-right ui-combobox-toggle")
        .mousedown(function () {
            wasOpen = input.autocomplete("widget").is(":visible");
        })
        .click(function () {
            input.focus();
  
            // close if already visible
            if (wasOpen) {
                return;
            }
  
            // pass empty string as value to search for, displaying all results
            input.autocomplete("search", "");
        });
  
                  input.tooltip({
                      tooltipClass: "ui-state-highlight"
                  });
              },
  
              _destroy: function () {
                  this.wrapper.remove();
                  this.element.show();
              }
          });
      })(jQuery);
  
      $(function () {
          $("#ddl_company").combobox();
          $("#toggle").click(function () {
              $("#ddl_company").toggle();
          });
      });
  </code></pre>
  
  <p></p></li>
  </ol>