javascript - 如何通过 api 调用使用 javascript 自动完成

Question

我正在尝试使用纯 JavaScript 进行自动完成。场景是当输入一些字母时，它将从 omdbapi 搜索电影。

我是这样实现的:

我输入了用户可以搜索电影的内容，我从输入值中获取了数据:

<input type="text" class="form-control" id="searchMovie" value="">

在这里，我获取电影并使用 javascript 制作 html 标记，以便在 html 中显示这些结果:

var searchInput = document.getElementById("searchMovie");

    // get movie
    searchInput.onkeydown = function() {
    var searchData = document.getElementById("searchMovie").value;

    if (searchData.length >= 3 ) {
        var request = new XMLHttpRequest();
        request.open('GET', 'http://www.omdbapi.com/?s=' + searchData + '&apikey=000000', true);
        request.onload = function () {
            // Begin accessing JSON data here
            var data = JSON.parse(this.response);

            const wrapper = document.createElement('div');
            app.appendChild(wrapper);
            var results = data;
            if (request.status >= 200 && request.status < 400) {
                console.log(data);
                Object.keys(data.Search).map(function(key, index) {
                    console.log(data.Search[index].Title);

                    const searchResultsContainer = document.createElement('div');
                    searchResultsContainer.setAttribute('class', 'row');

                    const h1 = document.createElement('h1');
                    h1.textContent = data.Search[index].Title;
                    wrapper.appendChild(searchResultsContainer);
                    searchResultsContainer.appendChild(h1);
                    console.log(searchResultsContainer);
                 });
            } else {
                console.log('error');
            }
        };
        request.send();
    }
  };

一切正常，但问题是:

当我尝试删除我编写的关键字并编写新的结果时，它不会从 html 中消失，我想要更改

Answer 1

您需要捕获文本输入中的更改。将代码添加到函数并将输入绑定(bind)到 oninput 函数。当输入值发生变化时，它将重新运行 api 调用。此外，您需要清除旧结果。

<input type="text" class="form-control" id="searchMovie" value="" oninput"apiCall()">

<script>
function apiCall(){
 var searchInput = document.getElementById("searchMovie");

    // get movie
    searchInput.onkeydown = function() {
    var searchData = document.getElementById("searchMovie").value;

    if (searchData.length >= 3 ) {
       while (document.getElementsByClassName('autoComplete')[0]) {
    document.getElementsByClassName('autoComplete')[0].remove();
}

        var request = new XMLHttpRequest();
        request.open('GET', 'http://www.omdbapi.com/?s=' + searchData + '&apikey=000000', true);
        request.onload = function () {
            // Begin accessing JSON data here
            var data = JSON.parse(this.response);

            var wrapper = document.createElement('div');
            wrapper.className = "autoComplete";
            app.appendChild(wrapper);
            var results = data;
            if (request.status >= 200 && request.status < 400) {
                console.log(data);
                Object.keys(data.Search).map(function(key, index) {
                    console.log(data.Search[index].Title);

                    const searchResultsContainer = document.createElement('div');
                    searchResultsContainer.setAttribute('class', 'row');

                    const h1 = document.createElement('h1');
                    h1.textContent = data.Search[index].Title;
                    wrapper.appendChild(searchResultsContainer);
                    searchResultsContainer.appendChild(h1);
                    console.log(searchResultsContainer);
                 });
            } else {
                console.log('error');
            }
        };
        request.send();
    }
}
</script>

这应该删除您添加的包装元素及其子元素，并用新数据填充新元素。我无法真正测试它以确保它有效，因为我看不到代码的其余部分。但它应该有效。如果没有，我可以帮助您找出任何错误。

此外，我会考虑将包装器设置为一个隐藏的 div，您可以在需要时轻松清除和取消隐藏。这会容易得多，您不需要添加和删除这么多元素。只需 wrapper.innerHTML = ""; 然后 wrapper.innerHTML = newRowSet; 即可完成