选择 datalist item 后，下拉列表仍然存在。我怎样才能确保它消失？

Question

<input class="c-search__textbox c-form__textbox"  id="top-query" list="top-json-datalist" onkeyup="suggest(this)" autocomplete="off" type="text" name="q" value="" placeholder="Type something . . .">

<datalist id="top-json-datalist"></datalist>

function suggest(elem) { 

if(elem.id == "query") {
    document.getElementById("query").disabled = false;
    var dataList = document.getElementById('json-datalist');
    var input = document.getElementById('query');
} else if (elem.id == "top-query") { 
    document.getElementById("top-query").disabled = false;
    var dataList = document.getElementById('top-json-datalist');
    var input = document.getElementById('top-query');
}

var request = new XMLHttpRequest();

// Handle state changes for the request.
request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
        var data = JSON.parse(request.responseText);
        var jsonOptions = data.hits;
        dataList.innerHTML = '';
        jsonOptions.forEach(function(item) {
            var option = document.createElement('option');
            option.value = item["query"];
            dataList.appendChild(option);
        });
    } 
  }
};

request.open('GET','https://api.lite.s4p.jp/v1/suggest&query='+input.value,true);
request.send();

如您所见，我可以从 ajax 调用中加载数据列表项。我能够在下拉列表中看到项目。但是，问题是选中item后，下拉框依然存在

谢谢！

Answer 1

我想知道你是否在你的建议功能中做了一些导致问题的事情，如果你删除 onkeyup="suggest(this)" 它是否有效？

另一件事是似乎支持数据列表quite buggy according to caniuse。您是否在其他浏览器中尝试过？

抱歉，我本来可以评论的，但我还没有足够的代表。

选择 datalist item 后，下拉列表仍然存在。我怎样才能确保它消失？

After selecting datalist item , the dropdown remains. How can i make sure it disappears?

javascript

datalist