Auto populate Data

by anoopsuda

HTML

<div class="multi-eids">
        <label for="" class="form-label">Secondary Requestor EID    <i  class="required">*</i></label>
        <!-- <div class="form-control-info">(EID with edit/replace permission; Same as user EID unless requesting on someone’s behalf)</div>       -->
        <div class="eid-search  ">     
            <div class="selected-items" contentEditable="true" id="">
                <!-- Selected items will be displayed here -->
            </div>
        <input type="text" class="form-control" id="countryInput"  placeholder="Add Multiple EID" id="myInput"    >
        
       
        <div class="multi-eids-dropdown">
          
        </div>
      </div>
     
      </div>

CSS

.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;}
     .multi-eids-dropdown {display: none; }
.selected-items {width: 300px;}

JavaScript

const countries = [ "USA", "UAE", "INDIA", "CHINA", "JAPAN", "CANADA", "UK", "NEPAL" ];

const selectedItemsContainer = document.querySelector('.selected-items');
const dropdownList = document.querySelector('.multi-eids-dropdown');
const countryInput = document.getElementById('countryInput');

// Populate the dropdown list based on user input
countryInput.addEventListener('input', function() {
    const inputText = countryInput.value.toLowerCase();
    const filteredCountries = countries.filter(country => country.toLowerCase().includes(inputText));
    
    // Clear the current dropdown list
    dropdownList.innerHTML = '';

    // Create a list of matching countries
    filteredCountries.forEach(country => {
        const item = document.createElement('div');
        item.classList.add('eid-item');
        item.innerHTML = '<span class="globe-icon"></span>' + country;
        item.addEventListener('click', () => selectCountry(country));
        dropdownList.appendChild(item);
    });

    // Display the updated dropdown list
    dropdownList.style.display = filteredCountries.length > 0 ? 'block' : 'none';
});

// Function to select a country
function selectCountry(country) {
    const selectedItem = document.createElement('div');
    selectedItem.classList.add('selected-item');
    selectedItem.setAttribute("contenteditable", "false");
    selectedItem.innerHTML = '<span class="globe-icon"></span>' + country + '<span class="close">x</span>';
    selectedItem.querySelector('.close').addEventListener('click', () => removeCountry(selectedItem));
    selectedItemsContainer.appendChild(selectedItem);
    countryInput.value = '';
    dropdownList.style.display = 'none';
}

// Function to remove a selected country
function removeCountry(selectedItem) {
    selectedItem.remove();
}