如何同时使用 Select2 作为可搜索的下拉菜单或文本框？答案

【问题标题】：How To Use Select2 As Searchable Dropdown or Textbox At The Same Time?如何同时使用 Select2 作为可搜索的下拉菜单或文本框？
【发布时间】：2021-08-19 21:46:15
【问题描述】：

我正在开发一个文本消息应用程序，我必须在其中维护一个联系人表，其中存储了联系人姓名、电话和其他字段。我正在使用带有 SQL 服务器数据库的 .Net Core 5.0 框架。

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

向现有联系人发送新消息（电话号码已保存在我的数据库中）。
向新号码发送新消息（未保存在我的数据库中）。

我添加了 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 控件，以便它可以同时充当下拉列表和文本框？

任何专家的建议都会有所帮助。谢谢

【问题讨论】：

标签： jquery textbox asp.net-core-mvc full-text-search jquery-select2

【解决方案1】：

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

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
    };
},

【讨论】：