Auto populate

by anoopsuda

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <div class="input" contenteditable="true"></div>
  <div class="dropdown">
    <ul class="dropdown-list"></ul>
  </div>

CSS

body {
  font-family: Arial, sans-serif;
}

.input {
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

.dropdown {
  position: relative;
}

.dropdown-list {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 300px;
  border: 1px solid #ccc;
  padding: 0;
  list-style: none;
}

.dropdown-list li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-list li:hover {
  background-color: #ddd;
}

.tag {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.tag:hover {
  background-color: #0056b3;
}

.tag .close {
  margin-left: 10px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  const countries = ["USA", "Canada", "UK", "Australia", "Germany", "France", "Brazil"];
  
  // Populate dropdown with country names
  const dropdownList = $('.dropdown-list');
  countries.forEach(country => {
    dropdownList.append(`<li>${country}</li>`);
  });

  // Show dropdown on input click
  $('.input').on('input', function() {
    const inputText = $(this).text().trim();
    dropdownList.empty();
    countries.forEach(country => {
      if (country.toLowerCase().includes(inputText.toLowerCase())) {
        dropdownList.append(`<li>${country}</li>`);
      }
    });
    $('.dropdown-list').show();
  });

  // Handle dropdown item click
  dropdownList.on('click', 'li', function() {
    const selectedCountry = $(this).text();
    $(this).remove();
    $('.input').append(`<span class="tag"  contenteditable="false">${selectedCountry}<span class="close">x</span></span>`);
    $('.dropdown-list').hide();
  });

  // Handle tag close click
  $('.input').on('click', '.tag .close', function() {
    const removedCountry = $(this).parent().text().slice(0, -1);
    dropdownList.append(`<li>${removedCountry}</li>`);
    $(this).parent().remove();
  });
});