Question

如何在jquery自动完成组合框中禁用特定项？...我正在使用以下代码来获取jquery组合框文档中的参考资料。

<div class="ui-widget"> <select id="combobox"> <option value="ActionScript" disabled="disabled">ActionScript</option> <option value="AppleScript">AppleScript</option> <option value="Asp">Asp</option> <option value="C" disabled="disabled">C</option> <option value="C++">C++</option> </select> </div>

并用$（＆＃34;＃combobox＆＃34;）.combobox（）;

初始化

但是我没有禁用dropdwon项目，其中我添加了disabled属性。如果有人知道我该怎么办，请告诉我。

Answer 1

为实现此目标，我们必须使用自动完成小部件的_renderItem，focus和change事件扩展功能。

示例基础取自jQueryui.ComboBox并根据需要进行扩展！

我在这里创建了jsBin example for this

此外，我还在添加带有完整html和脚本的代码段供您参考。

编辑：

＆＃13;

        (function($) {
          $.widget("custom.combobox", {
            _create: function() {
              this.wrapper = $("<span>")
                .addClass("custom-combobox")
                .insertAfter(this.element);

              this.element.hide();
              this._createAutocomplete();
              this._createShowAllButton();
              this.input.data("uiAutocomplete")._renderItem = function(ul, item) {
                var $el = $("<li>");
                if ($(item.option).is(":disabled")) {
                  $el.addClass("ui-state-disabled").text(item.label);
                } else {
                  $el.append("<a>" + item.label + "</a>");
                }

                return $el.appendTo(ul);
              };

            },

            _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
                  });
                },
                autocompletefocus: function(event, ui) {
                  if ($(ui.item.option).is(":disabled")) {
                    event.preventDefault();
                    $(event.currentTarget).val('');
                  }
                },
                autocompletechange: "_removeIfInvalid"
              });
            },

            _createShowAllButton: function() {
              var input = this.input,
                wasOpen = false;

              $("<a>")
                .attr("tabIndex", -1)
                .attr("title", "Show All Items")
                .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, Check only disabled option item
              if (ui.item) {
                if ($(ui.item.option).is(":disabled")) {
                  $(event.currentTarget).add(this.element).val('');
                }
                return;
              }

              // Search for a match (case-insensitive)
              var value = this.input.val(),
                valueLowerCase = value.toLowerCase(),
                valid = false;
              this.element.children("option:not(:disabled)").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("")
                .attr("title", value + " didn't match any active item")
                .tooltip("open");
              this.element.val("");
              this._delay(function() {
                this.input.tooltip("close").attr("title", "");
              }, 2500);
              this.input.autocomplete("instance").term = "";
            },

            _destroy: function() {
              this.wrapper.remove();
              this.element.show();
            }
          });
        })(jQuery);

        $(function() {
          $("#combobox").combobox();
          $("#toggle").click(function() {
            $("#combobox").toggle();
          });
        });

＆＃13;

        .custom-combobox {
          position: relative;
          display: inline-block;
        }
        .custom-combobox-toggle {
          position: absolute;
          top: 0;
          bottom: 0;
          margin-left: -1px;
          padding: 0;
        }
        .custom-combobox-input {
          margin: 0;
          padding: 5px 10px;
        }

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Combobox</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>

<body>

  <div class="ui-widget">
    <label>Your preferred programming language:</label>
    <br />
    <select id="combobox">
      <option value="">Select one...</option>
      <option value="ActionScript" disabled="">ActionScript</option>
      <option value="AppleScript">AppleScript</option>
      <option value="Asp">Asp</option>
      <option value="BASIC">BASIC</option>
      <option value="C">C</option>
      <option value="C++">C++</option>
      <option value="Clojure">Clojure</option>
      <option value="COBOL">COBOL</option>
      <option value="ColdFusion">ColdFusion</option>
      <option value="Erlang">Erlang</option>
      <option value="Fortran">Fortran</option>
      <option value="Groovy">Groovy</option>
      <option value="Haskell">Haskell</option>
      <option value="Java">Java</option>
      <option value="JavaScript">JavaScript</option>
      <option value="Lisp">Lisp</option>
      <option value="Perl">Perl</option>
      <option value="PHP">PHP</option>
      <option value="Python">Python</option>
      <option value="Ruby">Ruby</option>
      <option value="Scala">Scala</option>
      <option value="Scheme">Scheme</option>
    </select>
  </div>
  <button id="toggle">Show underlying select</button>


</body>

</html>

＆＃13;

禁用jquery autocomplete完成组合框中的特定下拉项

1 个答案: