jQuery组合框显示选择值而不是文本

Question

我正在使用（稍作修改的）jQuery 自动完成组合框将<select> 转换为实时搜索<input>。问题是底层<select> 看起来像：

<select department>
<option value="12345">Computer Engineering</option>
<option value="01234">Computer Science</option>
  :
</select>

因此，当用户选择他们的选项时，部门编号会放在<input> 中，这看起来很丑陋且令人困惑（但它是提交的正确值）。

除了进一步修改组合框小部件以添加<input type='hidden'> 并（以某种方式？）阻止<input type=text> 的提交之外，我还有其他可能吗？

编辑：正如@Pierre 的链接所示，组合框的<input type='text'> 没有名称，因此未提交，因此所需要做的就是放置所选选项的标签而不是其值进入文本输入。

Answer 1

默认 jquery ui 自动完成行为似乎显示值数据。 你可以改变这个，看这个帖子jQuery autocomplete shows value instead of label

否则，您还有其他开箱即用的解决方案：

• 已选择：https://harvesthq.github.io/chosen/
• 选择2：https://select2.org/getting-started/basic-usage

它将解决您使用包含 id 的 <input> 标记的问题...

Answer 2

这是我最终得到的代码，也许对其他人有帮助。 它是来自 jQuery UI 自动完成页面的组合框和类别示例的组合。注意：因为我没有动态修改底层选择，所以我只扫描一次选择——在组合框的 _create 函数中——如果可以修改，则应该将其移到 _source 函数中。

$(document).ready(function() {
  jQuery.widget("custom.autooptgroup", jQuery.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu(
        "option",
        "items",
        "> :not(.ui-autocomplete-category)"
      );
    },
    _renderMenu: function(ul, items) {
      var self = this;
      var prevCat = "";
      var li;
      jQuery.each(items, function(index, item) {
        li = "<li class='ui-autocomplete-category'>";
        if (item.category != prevCat) {
          ul.append(li + item.category + "</li>");
          prevCat = item.category;
        }
        li = self._renderItemData(ul, item);
        if (item.category) {
          li.attr(
            "aria-label",
            item.category + " : " + item.label
          );
        }
      });
    }
  });
  jQuery.widget("custom.combobox", {
    _create: function() {
      this.wrapper = $("<span>")
        .addClass("custom-combobox")
        .insertAfter(this.element);
      this.olvc = [];
      var ogroups = this.element[0].children;
      for (var i = 0; i < ogroups.length; ++i) {
        var ogroup = ogroups[i];
        if (ogroup.nodeName == "OPTION") {
          var opt = ogroup
          var txt = opt.text;
          var val = opt.value;
          this.olvc.push({
            option: opt,
            label: txt,
            value: val,
            category: ""
          });
        } else {
          var cat = ogroup.label;
          var opts = ogroup.children;
          for (var j = 0; j < opts.length; ++j) {
            var opt = opts[j];
            var txt = opt.text;
            var val = opt.value;
            this.olvc.push({
              option: opt,
              label: txt,
              value: val,
              category: cat
            });
          }
        }
      }

      this.element.hide();
      this._createAutocomplete()
    },

    /* :selected will return the first option if none are explicitly selected */
    /* we don't want this so we look at the selected attribute to see if the */
    /* option returned by :selected is really selected */
    _createAutocomplete: function() {
      var self = this;
      var selected = this.element.find(":selected");
      var really = (selected.attr('selected') != null);
      var value = really ? (selected.val() ? selected.text() : "") : "";

      this.input = $("<input>")
        .appendTo(this.wrapper)
        .val(value)
        .attr("title", "")
        .attr("size", "32")
        .attr("placeholder", self.element.attr('placeholder'))
        .addClass(
          "custom-combobox-input " +
          "ui-widget ui-widget-content " +
          "ui-state-default ui-corner-left"
        )
        .autooptgroup({
          delay: 0,
          minLength: 0,
          source: jQuery.proxy(this, "_source"),
          select: function(event, ui) {
            ui.item.option.selected = true;
            self._trigger("select", event, {
              item: ui.item.option
            });
            $(this).val(ui.item.label);  /* label, not value for us! */
            event.preventDefault();
          },
          change: function(event, ui) {
            var value = self.input.val();
            var valueLowerCase = value.toLowerCase();
            var valid = false;

            if (ui.item) return;

            self.element.children("option").each(function() {
              if ($(this).label().toLowerCase() === valueLowerCase) {
                this.selected = valid = true;
                return false;
              }
            });

            if (valid) return;

            self.input
              .val("")
              .attr("title", value + " didn't match any item")
              .tooltip("open");
            self.element.val("");
            self._delay(function() {
              this.input.tooltip("close").attr("title", "");
            }, 2500);
          }
        })
        .tooltip({
          classes: {
            "ui-tooltip": "ui-state-highlight"
          }
        });
    },

    _source: function(request, response) {
      response(jQuery.ui.autocomplete.filter(
        this.olvc, request.term
      ));
    },

    _destroy: function() {
      this.wrapper.remove();
      this.element.show();
    }
  });


  $('.example').combobox({
    delay: 0,
    minLength: 0
  });

});

.ui-autocomplete {
  text-align: left;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 20px;
}

.ui-autocomplete-category {
  font-weight: bold;
}

.ui-widget {
  font-family: Nimbus Sans, arial, helvetica, verdana, sans-serif;
  font-size: 1em;
}

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<span style='font-weight: bold'>States and Such</span><br>
<select name='locations' class='example' placeholder='Select Location'>
  <option value='MP'>Northern Mariana Islands</option>
  <option value='PR'>Puerto Rico</option>
  <option value='VI'>US Virgin Islands</option>
  <optgroup label='East'>
    <option value='NH'>New Hampshire</option>
    <option value='NJ'>New Jersey</option>
    <option value='NY'>New York</option>
    <option value='VT'>Vermont</option>
  </optgroup>
  <optgroup label='Midwest'>
    <option value='IA'>Iowa</option>
    <option value='MN'>Minnesota</option>
    <option value='ND'>North Dakota</option>
    <option value='SD'>South Dakota</option>
    <option value='WS'>Wisconsin</option>
  </optgroup>
  <optgroup label='South'>
    <option value='FL'>Florida</option>
    <option value='NC'>North Carolina</option>
    <option value='NM'>New Mexico</option>
    <option value='SC'>South Carolina</option>
    <option value='TX'>Texas</option>
  </optgroup>
  <optgroup label='West'>
    <option value='CA'>California</option>
    <option value='OR'>Oregon</option>
    <option value='WA'>Washington</option>
  </optgroup>
</select>