时间戳

首页 > 解决方案 > 选择 datalist item 后，下拉列表仍然存在。我怎样才能确保它消失？

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

问题描述

<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 调用加载数据列表项。我能够看到下拉列表中的项目。但是，问题是当项目被选中时，下拉菜单仍然存在。

谢谢你！

标签： javascriptdatalist

解决方案

我想知道您是否在建议功能中执行了导致问题的操作，如果您删除 onkeyup="suggest(this)" 是否有效？

另一件事是，根据 caniuse 的说法，对 datalist 的支持似乎很糟糕。您是否在其他浏览器中尝试过？

抱歉，本来只是发表评论，但我还没有足够的代表。

推荐阅读