title: asp.net mvc 4 bootstrap jquery combobox autocomplete
body: <p>I'm having problems with the rendering of combobox in my project. </p>
  
  <p>The autocomplete functionality works correctly. But you can not click to select the items in the combobox. Also the items are badly formed, and a descriptive label appears at the bottom.</p>
  
  <p>Print:
  <a href="http://tinypic.com/r/2jebtau/8" rel="nofollow">http://tinypic.com/r/2jebtau/8</a></p>
  
  <p>View:</p>
  
  <pre><code>&lt;div class="col-lg-10"&gt;
     @Html.DropDownList("IdProcedimento", (IEnumerable&lt;SelectListItem&gt;)ViewBag.PriorityID, new { @class = "form-control", id = "combobox" })
  &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>(function ($) {
              $.widget("custom.combobox", {
                  _create: function () {
                      this.wrapper = $("&lt;span&gt;")
                    .addClass("custom-combobox")
                    .insertAfter(this.element);
  
                      this.element.hide();
                      this._createAutocomplete();
                      this._createShowAllButton();
                  },
  
                  _createAutocomplete: function () {
                      var selected = this.element.children(":selected"),
                    value = selected.val() ? selected.text() : "";
  
                      this.input = $("&lt;input&gt;")
                    .appendTo(this.wrapper)
                    .val(value)
                    .attr("title", "")
                    .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        source: $.proxy(this, "_source")
                    })
                    .tooltip({
                        tooltipClass: "ui-state-highlight"
                    });
  
                      this._on(this.input, {
                          autocompleteselect: function (event, ui) {
                              ui.item.option.selected = true;
                              this._trigger("select", event, {
                                  item: ui.item.option
                              });
                          },
  
                          autocompletechange: "_removeIfInvalid"
                      });
                  },
  
                  _createShowAllButton: function () {
                      var input = this.input,
                    wasOpen = false;
  
                      $("&lt;a&gt;")
                    .attr("tabIndex", -1)
                    .tooltip()
  
                    .appendTo(this.wrapper)
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    })
                    .removeClass("ui-corner-all")
                    .addClass("custom-combobox-toggle ui-corner-right")
                    .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", "");
                    });
                  },
  
                  _source: function (request, response) {
                      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                      response(this.element.children("option").map(function () {
                          var text = $(this).text();
                          if (this.value &amp;&amp; (!request.term || matcher.test(text)))
                              return {
                                  label: text,
                                  value: text,
                                  option: this
                              };
                      }));
                  },
  
                  _removeIfInvalid: function (event, ui) {
  
                      // Selected an item, nothing to do
                      if (ui.item) {
                          return;
                      }
  
                      // Search for a match (case-insensitive)
                      var value = this.input.val(),
                    valueLowerCase = value.toLowerCase(),
                    valid = false;
                      this.element.children("option").each(function () {
                          if ($(this).text().toLowerCase() === valueLowerCase) {
                              this.selected = valid = true;
                              return false;
                          }
                      });
  
                      // Found a match, nothing to do
                      if (valid) {
                          return;
                      }
  
                      // Remove invalid value
                      this.input
                    .val("")
                      this.element.val("");
                      this._delay(function () {
                          this.input.tooltip("close").attr("title", "");
                      }, 2500);
                      this.input.data("ui-autocomplete").term = "";
                  },
  
                  _destroy: function () {
                      this.wrapper.remove();
                      this.element.show();
                  }
              });
          })(jQuery);
  
          $(function () {
              $("#combobox").combobox();
          });
  </code></pre>