是否可以在 datalist 中使用 select2 以及如何使用？

Question

目前我正在使用select 来选择从数据库中检索的选项。但我想提供另一种选择，用户可以在没有所需选项时输入输入。

<div class="form-group">
    <label for="createAppointmentContact" class="col-sm-2 control-label">Customer Name</label>
    <div class="col-sm-10">
        <select class="form-control select2contact" id="createAppointmentContact" onchange="showOptions(this)"></select>
    </div>
</div>

从数据库中获取选项的ajax

$(".select2contact").select2({
    width: '100%',
    theme: 'bootstrap',
    allowClear: true,
    cache: true,
    multiple: false,
    minimumInputLength: 0,
    placeholder: '- Please Select -',
    ajax: {
        url: "../WS/wsCustomerDetails.asmx/GetCustomerDetailsList",
        dataType: 'json',
        delay: 200,
        data: function (params) {
            return {
                searchKey: params.term || '',
                page: params.page || 1,
                pageLimit: 10,
                userID: getCookie('UserID')
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;
            return {
                results: data.items,
                pagination: {
                    more: data.morePages
                }
            }
        }
    }
});

SQL 查询

sqlQuery = string.Format(@"
     SELECT TotalCount = COUNT(Contact_ID) OVER(), 
     Contact_ID AS id, Contact_Name AS text
     FROM CustomerDetails
     WHERE IsDelete = 0 AND Contact_Name is not null {0}                        
     ORDER BY Contact_ID                            
     OFFSET " + (Convert.ToInt32(page) - 1).ToString() + "*" + pageLimit + " ROWS FETCH NEXT " + pageLimit + " ROWS ONLY", sqlSearch);

是否可以在 datalist 中使用 select2 以及如何使用？如果没有，如何从数据库中获取选项到datalist，然后将选中的选项插入到数据库中？

Answer 1

您正在寻找tagging 或动态选项创建。可以像这样轻松启用标记：

<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

$(".js-example-tags").select2({
  tags: true
});