Select2-使用多个select2作为文本框

Question

I am using select2 ajax functionality to populate users email into select field. When there are no users email I should be able to enter email manually.

here is the code

= f.collection_select :bcc_email_ids, Service::BccEmail.where("ticket_id = ?", @ticket.id), "email", :name_with_email, {selected: @ticket.bcc_emails.map(&:email)}, class: "form-control custom-select multiple_select_cc_dropdown", multiple: true

I am populating emails in select2 dropdown through ajax call given below:

$.ajax({
        url: url,
        data: post_data,
        type: "get",
        dataType: 'json',
        format: "json",
        success: function(data){
          $.each(data.records, function(key, value) {
            arr.push({id: value.email, text: value.first_name + " " + value.last_name + "-" + value.email})
          })
          $(".multiple_select_cc_dropdown").html('').select2({data: arr });
        },
        error: function(data){

        }
      });

when there are no email populated then I should be able to enter email manually as textbox?

Answer 1

Use tags: true inside select2 function.

$.ajax({
        url: url,
        data: post_data,
        type: "get",
        dataType: 'json',
        format: "json",
        success: function(data){
          $.each(data.records, function(key, value) {
            arr.push({id: value.email, text: value.first_name + " " + value.last_name + "-" + value.email})
          })
          $(".multiple_select_cc_dropdown").html('').select2({tags: true,data: arr });
        },
        error: function(data){

        }
      });