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调用加载datalist项目。我能够在下拉列表中看到这些项目。但是，问题是当选择项目时，下拉列表仍然存在。

谢谢！

Answer 1

我想知道你是否在你的建议功能中做了导致问题的事情，如果你删除了onkeyup =＆＃34;建议（这）＆＃34;？

另一件事是对datalist的支持似乎quite buggy according to caniuse。您是否尝试过其他浏览器？

很抱歉，我刚刚发表了评论，但我还没有足够的代表。

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

1 个答案: