Как предотвратить дублирование элементов в списке при поиске городов?

Question

[xanzik312]

Здравствуйте.
При повторном вводе символов в поле для поиска города, города которые попали под филтрацию дублируются. Подскажите как это исправить на JQuery.

<div class="search__city">

    <input type="text" name="choice__city" id="choice__city" placeholder="Введите город">

    <div class="dropdown-menu">
        <!-- <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Ростов</span></a>
        <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Москва</span></a>
        <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Анапа</span></a>
        <a class="dropdown-item"><i class="icon icon-line-circle"></i><span>Сочи</span></a> -->
    </div>

</div>

$('input[name="choice__city"]').keyup(function(){

    $('.search__city .dropdown-menu').css('display', 'flex');
    var value = $(this).val().toLowerCase(); //3

    let dataList = {};
    fetch('../russia.json').then( response=> {
        return response.json()
    }).then(
        json=> {
            dataList = json;
            for(let i = 0; i < dataList.length; i++){
                $('.search__city .dropdown-menu').append(`<a class="dropdown-item"><i class="icon icon-line-circle"></i><span>${dataList[i].city}</span></a>`)
            }
        }
    )

    if($(this).val() == ""){
        $('.search__city .dropdown-menu').css('display', 'none');
    }

    $(".search__city .dropdown-menu .dropdown-item").filter(function() { //4
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    })

    $(".search__city .dropdown-menu .dropdown-item span").on('click', function(e){
        var target = $(e.target);
        if (target.is('span')) {
            $('input[name="choice__city"]').val(target.text());
        }
        $('.search__city .dropdown-menu').css('display', 'none');
    })
})

Answer 1

[imko]

Очищать .dropdown-menu перед записью

Answer 2

[Сергей delphinpro]

function makeItem(title) {
  return `<a class="dropdown-item"><i class="icon icon-line-circle"></i><span>${title}</span></a>`;
}

fetch('../russia.json')
  .then(response => response.json())
  .then(json => {
    const itemsHtmlString = json.map(item => makeItem(item.city)).join()
    $('.search__city .dropdown-menu').html(itemsHtmlString);
  });