JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="input" contenteditable="true" id="countryInput"></div>
<div class="multi-eids-dropdown" id="countryDropdown"></div>

CSS

.dropdown {
  display: none;
  border: 1px solid #ccc;
  max-height: 100px;
  overflow-y: auto;
}

.input {
  border: solid 1px #ddd;
}

span .remove {
  display: inline-block;
  margin-left: 5px;
  cursor: pointer;
}


/*=====================================================*/

.multi-eids {
  position: relative;
}

.multi-eids-dropdown {
  position: absolute;
  overflow-y: auto;
  top: 50px;
  left: 0;
  width: 100%;
  max-height: 197px;
  min-height: 60px;
  border: solid 1px #ddd;
  background: #fff;
  box-shadow: 0 0 5px #ddd;
}

.eid-item {
  display: flex;
  padding: 8px;
  border-bottom: solid 1px #ddd;
}

.eid-item:hover {
  background: var(--gray-light);
}

.eid-item:last-child {
  border-bottom: none;
}

.userpic {
  width: 32px;
  height: 32px;
  margin: 0 8px 0 0;
}

.eidinfos {
  line-height: normal;
}

.eidinfos p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.eidinfos small {
  font-size: 12px;
  font-weight: 400;
}

.selected-items {
  /* border: 2px solid var(--grey-ui-grey-700, #b3b2b5); */
  height: 48px;
  width: 100%;
  top: 0;
  padding: 8px 0 0 0;
}

.selected-item {
  display: inline-flex;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--gray-light);
  border: solid 1px #ddd;
  border-radius: 4px;
  height: 24px;
  margin: 0 4px 4px 0;
  justify-content: space-between;
}

.selected-item .close {
  margin: 0 0 0 4px;
  font-weight: 600;
}

JavaScript

$(document).ready(function() {
  const countries = ["USA", "Canada", "UK", "Australia", "France", "Germany", "Japan"];

  const $input = $("#countryInput");
  const $dropdown = $("#countryDropdown");

  // Populate the dropdown with country items
  function populateDropdown() {
    $dropdown.empty();
    const inputText = $input.text().trim();
    countries.forEach(function(country) {
      if (country.toLowerCase().includes(inputText.toLowerCase())) {
        const $item = $("<div class='eid-item'>").text(country);
        $item.on("click", function() {
          addCountryToInput(country);
          $item.remove();
        });
        $dropdown.append($item);
      }
    });
  }

  function addCountryToInput(country) {
    const $span = $("<span contenteditable='false' class='selected-item'>").text(country);
    const $remove = $("<span class='close'>x</span");

    $remove.on("click", function() {
      $span.remove();
      $dropdown.append($("<div class='eid-item'>").text(country).on("click", function() {
        addCountryToInput(country);
        $(this).remove();
      }));
    });

    $span.append($remove);
    $input.empty();
    $input.append($span);
  }

  // Show the dropdown when the user types a letter or clicks on the input element
  $input.on("input click", function() {
    $dropdown.show();
    populateDropdown();
  });

  // Hide the dropdown when clicking outside the input or dropdown
  $(document).on("click", function(event) {
    if (!$input.is(event.target) && !$dropdown.is(event.target) && $dropdown.has(event.target).length === 0) {
      $dropdown.hide();
    }
  });
});