在“选择” / 下拉HTML列表中手动输入一个值吗？
问题的原因是在HTML规范中，文本框和下拉框是两种基本不同的元素，无法直接将它们的功能组合在一起。解决这个问题的方法是使用selectize.js插件，它可以将文本框和下拉框的功能融合在一起。
selectize.js是一个基于jQuery的插件，它可以用于标签选择、联系人列表、国家选择等功能。通过使用selectize.js，我们可以实现在下拉框中手动输入值的功能。
在尝试了几乎所有的解决方案后，我发现selectize.js是最好的解决方法。它真正解决了我的问题，非常感谢分享这个插件。在经过大量的搜索后，我终于找到了这样一个可以轻松应用的解决方案。
感谢那位真正的MVP，你知道这是谁。在经过一番搜索之后，我终于找到了这个可移植的解决方案。
问题的原因是用户在一个下拉列表中手动输入一个值后，当用户点击其他地方时，输入的值会消失。用户希望能够输入自定义答案，而不仅仅是下拉列表中的选项。
解决方法是使用jQuery的combobox/autocomplete插件。这个插件不需要许可证，功能与ExtJS提供的类似。
以下是一个解决方法的示例：
首先，将jQuery和jQuery UI的库文件添加到你的HTML文件中：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
然后，在HTML文件中添加一个input元素和一个select元素，用于显示下拉列表：
<input id="customInput" type="text" placeholder="Type here"> <select id="selectList"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> </select>
接下来，使用jQuery的autocomplete方法来创建一个自动完成的下拉列表。该方法需要两个参数：input元素的ID和一个选项对象。在选项对象中，我们可以定义自定义答案的处理逻辑。
$(function() {
var availableOptions = [
"Option 1",
"Option 2",
"Option 3"
];
$("#customInput").autocomplete({
source: availableOptions,
minLength: 0,
select: function(event, ui) {
if (ui.item) {
$("#selectList").val(ui.item.value);
}
}
}).focus(function() {
$(this).autocomplete("search");
});
});
在这个示例中，我们将"Option 1"，"Option 2"和"Option 3"作为可用选项存储在一个数组中。然后，将该数组作为source参数传递给autocomplete方法。通过设置minLength为0，我们允许用户在输入框中输入自定义答案。
在select事件中，我们检查用户选择的项是否存在。如果存在，我们将该值设置为selectList元素的值，以便将其显示在下拉列表中。
最后，我们使用focus事件来在输入框获取焦点时自动触发搜索。
完成以上步骤后，用户就可以在输入框中手动输入值，并且可以选择下拉列表中的选项。当用户选择一个选项时，该值将显示在下拉列表中。
