我想做一个自动填充国家名称的网页。当用户在可编辑类型div中键入一个字母时，屏幕将显示与用户键入的字母相匹配的字母。一旦点击任何一个标签项，它将加载到输入区域，作为带有删除X标记的标签类型项，选定的项将从标签中删除，并在删除标签时将其添加回标签中。在这里，我面临着两个问题，电子邮件不显示基于打印的信件，它显示在焦点上。第二个问题，一旦我选择了一个项目，它将作为标签添加，但不会从输入div区域删除键入的字母。请帮我解决这个问题

<div class="input" contenteditable="true" id="countryInput"></div>
    <div class="multi-eids-dropdown" id="countryDropdown"></div>

.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; }

$(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();
        countries.forEach(function(country) {
            if ($input.text().indexOf(country) === -1) {
                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=''>").text(country).on("click", function() {
                addCountryToInput(country);
                $(this).remove();
            }));
        });
        
        $span.append($remove);
        $input.append($span);
    }

    // Show the dropdown when the user types a letter
    $input.on("input", 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();
        }
    });
});

https://jsfiddle.net/anoopsuda/pkfL30gw/16/