我正在使用（略有修改的）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'>没有名称，因此没有提交，因此所有要做的就是放置所选选项的标签而不是它是文本输入中的值。
答案 0 :(得分：1)
默认的jQuery ui自动完成行为似乎显示值数据。 您可以更改此设置，请参见此线程Is it possible to use Cypress e2e testing with a firebase auth project?
否则，您还有其他可以直接使用的解决方案：
它将使用包含ID的<input>标签来解决您的问题...
答案 1 :(得分：0)
这是我最终得到的代码，也许会对其他人有所帮助。 它是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>