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自动完成显示值而不是标签

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

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

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

Answer 2

这是我最终得到的代码，也许它会对其他人有所帮助。它由jQueryUI自动完成页面中的组合框和类别示例组成。注意：因为我不动态修改底层的select，所以我只扫描select一次——在combobox _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>