Скрыть раскрывающийся список автозаполнения при нажатии за пределами поля формы

Question

Я выполнил поиск автозаполнения, когда при вводе в поле формы он будет заполнять выпадающий список результатов из массива.

Проблема, с которой я столкнулся, заключается в том, что когда вы щелкаете за пределами раскрывающегося списка, он исчезает, как и должен, но когда вы снова начинаете вводить данные в поле формы, раскрывающийся список не отображается. Я пытаюсь использовать jQuery для достижения этой цели:

Для отображения раскрывающегося списка под полем поиска:

const input = document.querySelector('#FAVORITE_LOCATION');
const suggestions = document.querySelector('.suggestions ul');
const country = ['USA', 'Canada'];

function search(str) {
    let results = [];
    const val = str.toLowerCase();

    for (i = 0; i < country.length; i++) {
        if (country[i].toLowerCase().indexOf(val) > -1) {
            results.push(country[i]);
        }
    }

    return results;
}

function searchHandler(e) {
    const inputVal = e.currentTarget.value;
    let results = [];
    if (inputVal.length > 0) {
        results = search(inputVal);
    }
    showSuggestions(results);
}

function showSuggestions(results) {

    suggestions.innerHTML = '';

    if (results.length > 0) {
        for (i = 0; i < results.length; i++) {
            suggestions.innerHTML += `<li>${results[i]}</li>`;
        }
        suggestions.classList.add('has-suggestions');
    } else {
        results = [];
        suggestions.innerHTML = '';
        suggestions.classList.remove('has-suggestions');
    }
}

function useSuggestion(e) {
    input.value = e.target.innerText;
    input.focus();
    suggestions.innerHTML = '';
    suggestions.classList.remove('has-suggestions');
}

input.addEventListener('keyup', searchHandler);
suggestions.addEventListener('click', useSuggestion);

Ниже я пытаюсь скрыть заполнение автозаполнения:

$(document).on('click', function(event){
    var container = $("ul.has-suggestions");
    if (!container.is(event.target) &&            
        container.has(event.target).length === 0) 
    {
       container.hide();
    }else{
        container.show();
    }
});

Наконец, вот CSS для самого выпадающего списка

.search-container {
  position: relative;
}

.search-container input,
.search-container .suggestions {
  width: 100%;
}
.search-container input {
  background-color: white;
  height: 60px;
  padding: 0 10px;
}
.search-container .suggestions {
  position: absolute;
  top: 80px;
}

ul {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  max-height: 200px;
  overflow-y: auto;
}
ul.has-suggestions {
  display: block;
}
ul li {
  padding: 10px;
  cursor: pointer;
  background-color: white;
  color: black;
}

ul.has-ideas установлен на display: block, когда пользователь начинает вводить текст в поле формы, которое затем отображает заполненный выпадающий список. Я пытался использовать оператор if / else и использовать .show (); но это не похоже на работу.

Буду признателен за любую помощь!

Спасибо!

Answer 1

Вы, вероятно, хотите сделать что-то подобное, чтобы показать и / или скрыть ваши предложения по автозаполнению:

input.addEventListener('blur', function() {
  $("ul.has-suggestions").hide();
})

input.addEventListener('focus', function() {
  $("ul.has-suggestions").show();
})

редактировать: кодовая ручка с примером

редактировать 2 с запрошенным обновлением; кодовая ручка с примером

Этот второй кодовый блок заполняет поле формы щелчком значения.