Question

我在项目中渲染组合框时出现问题。

自动填充功能正常运行。但是您无法单击以选择组合框中的项目。此外，项目形成不良，底部会显示描述性标签。

查看：

<div class="col-lg-10">
   @Html.DropDownList("IdProcedimento", (IEnumerable<SelectListItem>)ViewBag.PriorityID, new { @class = "form-control", id = "combobox" })
</div>

脚本：

(function ($) {
            $.widget("custom.combobox", {
                _create: function () {
                    this.wrapper = $("<span>")
                  .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 = $("<input>")
                  .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;

                    $("<a>")
                  .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 && (!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();
        });

Answer 1

尝试添加这些文件：

jquery-ui.css  // this is for styling
jquery-1.10.2.js
jquery-ui.js"

还需要以下css类：

.custom-combobox {
   position: relative;
   display: inline-block;
}
.custom-combobox-toggle {
   position: absolute;
   top: 0;
   bottom: 0;
   margin-left: -1px;
   padding: 0;
   /* support: IE7 */
   *height: 1.7em;
   *top: 0.1em;
}
.custom-combobox-input {
   margin: 0;
   padding: 0.3em;
}

检查“表单控制”类是否有效。

您已从here

下载了此内容

您是否更改了CSS中插件使用的图像（图标）的路径。

asp.net mvc 4 bootstrap jquery组合框自动完成

1 个答案: