Можно ли использовать select2 в datalist и как?

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);

Можно ли использовать select2 в списке данных и как? Если нет, как получить параметр из базы данных в список данных, а затем вставить выбранный параметр в базу данных?

Answer 1

Вы ищете тегирование или создание динамического параметра.Маркировка может быть легко включена следующим образом:

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

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