Question

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

我做到了：

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

    $mypath = "/my/files/inside/here/";
    $dirname_to_zip = "mydir";

    $zip = new ZipArchive();
    $zipfile_with_path = $mypath.$dirname_to_zip.".zip";

    if ($zip->open($zipfile_with_path, ZipArchive::CREATE)!==TRUE) 
        die("failed to create zip");

    // Create recursive directory iterator
    $files = new RecursiveIteratorIterator(
        new RecursiveDirectoryIterator($mydir.$dirname_to_zip),
        RecursiveIteratorIterator::LEAVES_ONLY
    );

    foreach ($files as $name => $file)
    {
        // Skip directories (they would be added automatically)
        if (!$file->isDir())
        {
            // Get real and relative path for current file
            $filePath = $file->getRealPath();
            $relativePath = substr($filePath, strlen($dirname_to_zip) );

            // Add current file to archive
            $zip->addFile($filePath, $relativePath);
        }
    }

    $zip->close();

在这里，我得到电影并使用javascript进行html标记，以在html中显示这些结果：

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

一切正常，但问题是：

当我尝试删除自己写的关键字并写一个新的结果不会从html中消失时，我想更改

Answer 1

将其设置为h1.textContent = data.Search[index].Title;而不是设置h1.innerHTML = data.Search[key].Title;

Answer 2

您需要捕获文本输入中的更改。将代码添加到函数并将输入绑定到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>

这应该删除您添加的wrapper元素及其子元素，并用新数据填充新元素。我无法真正测试此功能以确保其正常工作，因为看不到您的其余代码。但是应该可以。如果没有，我可以帮助您找出任何错误。

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

如何通过API调用自动完成JavaScript

2 个答案: