JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<div class="container">
<form class="form-inline">

  <select id="selec1" name="select1" class="select2" data-placeholder="Select One">
    <option></option> <!-- use this to allow data-placeholder -->
    <option value="item-1">Item 1</option>
    <option value="item-2">Item 2</option>
    <option value="item-3">Item 3</option>
    <option value="item-4">Item 4</option>
    <option value="item-5">Item 5</option>
    <option value="item-6">Item 6</option>
    <option value="item-7">Item 7</option>
    <option value="item-8">Item 8</option>
    <option value="item-9">Item 9</option>
    <option value="item-10">Item 10</option>
  </select>
  <select id="select2" name="select2" class="select2" data-placeholder="Selecting a long sentence list">
    <option></option>
    <option value="item-1">Item 1 Selecting a long sentence list</option>
    <option value="item-2">Item 2 Selecting a long sentence list</option>
    <option value="item-3">Item 3 Selecting a long sentence list</option>
    <option value="item-4">Item 4 Selecting a long sentence list</option>
    <option value="item-5">Item 5 Selecting a long sentence list</option>
    <option value="item-6">Item 6 Selecting a long sentence list</option>
    <option value="item-7">Item 7 Selecting a long sentence list</option>
    <option value="item-8">Item 8 Selecting a long sentence list</option>
    <option value="item-9">Item 9 Selecting a long sentence list</option>
    <option value="item-10">Item 10 Selecting a long sentence list</option>

  </select>
  <select id="select3" name="select3" class="select2" data-placeholder="Long List > 10 search">
    <option></option>
    <option value="item-1">Item 1</option>
    <option value="item-2">Item 2</option>
    <option value="item-3">Item 3</option>
    <option...

CSS

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

body {
  font-family: Rubik, Sans-Serif;
  font-size: 1rem;
}

:root {
  --field-border-color: #afafaf;
  --field-border-alt-color: #cfcfcf;
  --field-placeholder-color: #999;
}

::placeholder{
  color:var(--field-placeholder-color);
}

.container {
  display: flex;
  align-items: flex-start;
flex-wrap:wrap;
  padding: 1rem;
  border: 1px solid var(--field-border-color);
  border-radius: 4px;
  padding-right: 0.4rem;
  margin-bottom: 0.4rem;
}
.container > form{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:stretch;
}

.form-inline input[type="text"],
.form-inline .radio-group,
.form-inline .checkbox-group,
.form-inline .select2{
  margin-right:0.4rem;
  margin-bottom:0.4rem;
  flex:1 0 140px;
  border:1px solid var(--field-border-color);
    border-radius: 3px;
    align-items:center;
    display:flex;
    outline:0;
    height:40px;
}

.select2 {
  min-width: 140px;
  font-size:0.875rem;  
}

/*select2 reset */
.select2-container .selection,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  line-height:inherit;
  height:auto;
   flex: 1;
  min-width: 0;
  outline: 0;
  border:0;
  margin:0;
  padding:0;
  min-height:inherit;
}

.select2-container .select2-selection__rendered{
display:flex;
align-items:center;
justify-content:flex-start;
}

.select2-container.select2-container--default.select2-container--open {
  border-bottom: 1px solid rgba(0, 0, 0, 0.0);
 ...

JavaScript

$(document).ready(function() {


  $('.select2').not('[multiple]').select2({
    width: 'resolve',
    dropdownAutoWidth: true,
    allowClear: true,
    minimumResultsForSearch: 18

  });

  $('.select2[multiple]').select2({
    width: 'resolve',
    allowClear: false,
    minimumResultsForSearch: 18

  });

  const $form = document.querySelector('form');
  const $code = document.querySelector('pre');

  $form.addEventListener('submit', formHandler);


});



function formHandler(e) {
  e.preventDefault();
  console.log(e);

  let form = e.target;
  let fData;

  if (form.nodeName.toString() === 'FORM') {

    fData = new FormData(form);

		postForm(fData);

    console.log(formSerialize(fData));


  }

  //let  formData = new FormData(form)
  // $code.innerText = formData.serialize()


}


function formSerialize (data) {
	let obj = {};
	for (let [key, value] of data) {
		if (obj[key] !== undefined) {
			if (!Array.isArray(obj[key])) {
				obj[key] = [obj[key]];
			}
			obj[key].push(value);
		} else {
			obj[key] = value;
		}
	}
	return obj;
}



function postForm(data){

if(!data){
console.warn("no Form Data!")
return false;
}

let serializedData = JSON.stringify(formSerialize(data));

fetch('https://jsonplaceholder.typicode.com/posts', {
		method: 'POST',
		body: serializedData,
		headers: {
			'Content-type': 'application/json; charset=UTF-8'
		}
	}).then(function (response) {
		
    if (response.ok) {
			return response.json();
		}
		return Promise.reject(response);
    
	}).then(function (data) {
   console.log('Data is submitted',data);
	}).catch(function (error) {
		console.warn('Data is not submitten', error);
	});



}