如何使用Select2作为可搜索的下拉框或文本框在同一时间?

Question

我正在开发一个文本消息传递应用程序，我必须维护一个联系人表，其中存储联系人姓名、电话和其他字段。我使用。net Core 5.0框架与SQL server数据库。

我想要的是添加一个搜索功能，当我想要发送一个新的消息。这里有两种情况。

1. 发送新消息给现有联系人(电话号码已保存在我的数据库中)。
2. 向新号码发送新消息(未保存在我的数据库中)。

我已经添加了jQuery Search2库，可以通过姓名或电话号码搜索现有联系人，我可以像专业人士一样发送新消息给现有联系人。

然而，我想使用或配置相同的Search2下拉菜单，这样当我输入一个没有保存在我的数据库中的新电话号码时，它可以像一个文本框一样起作用，并且它可以将这个数字维护为一个值。在点击发送消息按钮后，这个新数字应该作为文本框值传递给我的控制器。

现在，当我在键入电话号码后单击search2控件外部时，它将值重置为null。

这是我的select2 HTML:

<select id="ajaxSelect2" class="js-data-example-ajax"></select>

jQuery代码在这里:

$("#ajaxSelect2").select2({
ajax: {
url: "https://localhost:44343/api/Contact/Search",
contentType: "application/json; charset=utf-8",
dataType: 'json',
delay: 250,
data: function (params) {
var query =
{
term: params.term,
};
return query;
},
processResults: function (result) {
debugger
return {
results: $.map(result, function (item) {
return {
id: item.phoneNo,
text: item.firstName + ' ' + item.lastName
};
}),
}
},
cache: true
},
placeholder: 'Search Contacts or Type In Phone Number',
allowClear: true,
minimumInputLength: 1
});

是否有可能允许/自定义Search2控件根据我的要求，所以它可以作为一个下拉框以及一个文本框在同一时间?

任何专家的建议都会很有帮助。由于

Answer 1

我在select2中没有发现任何配置可以实现你的特性，因此我尝试编写自定义代码来实现它。我的想法是将params.term保存到一个全局变量中，然后我们检查是否有数据存在于ajax的查询结果中，如果它没有返回任何选项，我们将params.term设置为选择输入的innerHTML。然后它可以解决你点击页面的空白位置输入值变为null的问题;

data: function(params) {
selectVal = params.term;
var query = {
search: params.term,
type: 'public'
}
return query;
},
processResults: function(result) {
if(result.result.length == 0){
document.getElementsByClassName('select2-selection__rendered')[0].innerHTML=selectVal;
}
return {
results: result.result
};
},