JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<h1>
BIG HEADER
</h1>
<form action="">
<table border="0" cellspacing="0" cellpadding="5" class="layout">
  <tbody>
  <tr>
      <th>With optgroup tags</th>
      <th>Without optgroup tags</th>
    </tr>
    <tr>
      <td scope="row">
		<select class="searchable" required>
		  <option value="">Select..</option>
		  <optgroup label="US STATES">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District Of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option...

CSS

select {
  border: solid 1px #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #222;
  margin-bottom: 4px;
  min-height: 36px;
  width: 300px;
}
table{
  font-family: helvetica, serif;
}
table th{
  background-color: #356db0;
  color: #fff;
  font-size: 13px;
}




.layout {
    border-spacing: 5px;
    border-collapse: separate;
    width: 100%;
    position: relative;
}
.layout.hidden{
  display: none;
}
.dynamic-form-workspace>.layout tr {
    position: relative;
}

.layout>tbody>tr>td {
    border-style: solid !important;
    border-width: 0px !important;
    border-color: rgb(204, 204, 204) !important;
    padding: 5px !important;
}














/* start class styles */

.searchable-select-layout{
  z-index: 9999999999;
  perspective: 1000;
}

.searchable-select-layout .aliveComponents{
  perspective: none !important;
}

.searchable-select.hide-searchable{
  height: 1px!important;
  width: 1px !important;
  border: none !important;
  opacity: 0;
  margin: 0px;
  padding: 0px;
  min-height: 0px;
}
.searchable-select.hide-searchable-full{
  display: none;
  position: fixed;
  left: -199999px;
}
.searchable-select-component {
  position: relative;
  width: 300px;
  font-size: 13px;
  font-family: helvetica, serif;
  display: none;
}

.searchable-select-component.active {
  display: inline-block;
  z-index:999;
}



.searchable-select-component[data-multiple].active {
  z-index: initial;
}

.searchable-select-component>input[type="search"] {
  border: solid 1px #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #222;
  margin-bottom: 4px;
  min-height: 36px;
  padding: 6px;
  padding-left: 26px;
  width: 100%;
  background-image:...

JavaScript

function SearchableSelect(selector,layoutSelector) {

  var t = this;

  t.maxBeforeScrolling = 15;

  t.search = function(val, searchInput) {

    searchInput.find('nav').addClass('empty');
    searchInput.find('nav button').hide();

    if (val) {

      searchInput.find("nav button[data-value*='" + val.toLowerCase() + "']").show();
      searchInput.find("nav button[data-label*='" + val.toLowerCase() + "']").show();

    } else {

      searchInput.find('nav button').show();

    }

    searchInput.find('nav button').each(function() {

      if ($(this).css('display') == 'block') {

        searchInput.find('nav').removeClass('empty');

        $(this).prev('button.optgroup').show();

      }

    });

  }

  $(selector).each(function() {

    let element = $(this);
    
    let isMultiple = false;
    let multipleAttr = '';

    if (element.prop('tagName') == 'SELECT') {
    
    	element.addClass('searchable-select');
    
    	if(typeof(element.attr('multiple')) != 'undefined'){
      
      	isMultiple = true;
        multipleAttr = ' data-multiple="multiple"';
      
      }
      
      element.searchInput = $('<div class="searchable-select-component"' + multipleAttr + '><input type="search" placeholder="Search list.."><nav></nav></div>');
      
      if(isMultiple){
      
      	element.focus(function() {

           element.searchInput.find('input').focus();

        });
        
        //element.addClass('hide');
         
      
      } else {
      
      	element.focus(function() {
        
        	element.addClass('hide-searchable');
          
          element.searchInput.find('input').focus();
          
        });
        
        element.click(function(e) {
        
        	e.preventDefault();
        
        	element.addClass('hide-searchable');
          element.addClass('hide-searchable-full');
          
          element.searchInput.find('input').focus();
          
        });
        
      
      }

      

     ...