如何从 html 输入表单中设置搜索结果的样式

Question

我正在使用 html 输入字段来搜索来自 OMDb 的结果，目前我只是将它们显示在列表中的表单下方，但希望它们出现在输入字段下方，有点像在 Google 上时主页，您会得到一些结果，它会下拉显示您已经输入的内容的潜在搜索结果（即，如果我输入上它可能会在它下方弹出显示尚志，Shei xian ai shang ta de，Hai shang hua 、大上海等）。

<li>
   <label for="search">OMDb lookup:</label>
   <input id="search" placeholder="start typing film title" type="input" name="search" maxlength="255" onkeyup="waitForIt()">
</li>
<li>
   <ul id="omdbReturn">
   </ul>
</li>

是我拥有的 HTML，那么我的 javascript 是：

var timer = null;

function waitForIt() {
    clearTimeout(timer);
    timer = setTimeout(omdbSearch, 1000)
};

function omdbSearch() {
    let searchTerm = encodeURI(document.getElementById("search").value);
    $.getJSON('https://www.omdbapi.com/?apikey=<apikey>&type=movie&page=1&s=' + searchTerm).then(function(omdbResults) {
        if (omdbResults.Response !== 'False') {
            let tot = omdbResults.totalResults;
            if (tot > 10) { //only return up to first ten results
                tot = 10;
            }
            document.getElementById('omdbReturn').innerHTML = '';
            for (i = 0; i < tot; i++) {
                document.getElementById('omdbReturn').innerHTML += ('<li id="' + omdbResults.Search[i].imdbID + '">' + omdbResults.Search[i].Title + ' (' + omdbResults.Search[i].Year + ')</li>');
            }
            let list = document.getElementById("omdbReturn");

            function Populate() {
                $.getJSON('https://www.omdbapi.com/?apikey=<apikey>&type=movie&plot=full&i=' + this.id).then(function(omdbMovie) {
                    document.getElementById("film").value = omdbMovie.Title + " (" + omdbMovie.Year + ")";
                    document.getElementById("image_url").value = omdbMovie.Poster;
                    document.getElementById("desc").value = omdbMovie.Plot;
                    document.getElementById("imdb").value = "https://www.imdb.com/title/" + omdbMovie.imdbID + "/";
                    document.getElementById('omdbReturn').innerHTML = '';
                });
            }
            for (i = 0; i <= list.childElementCount - 1; i++) {
                list.children[i].addEventListener("click", Populate);
            }
        } else {
            document.getElementById('omdbReturn').innerHTML = '';
        }
    });
}
                        

所以这一切都很好，产生了一个很好的小结果列表，如果我点击一个结果，它会在我的表单的其余部分填充相关字段（让用户不必去 IMDb 并复制/粘贴结果他们自己） - 我只是想改进它在屏幕上的显示方式，但我的 CSS 很糟糕，谷歌并没有真正理解我想要问的内容（所以缺少我想用来确定搜索的措辞）。

不要找人为我定制脚本，只要指出正确的方向，将不胜感激！

[编辑]

想一想，下面是 Javascript 注入的 HTML 的样子，再次使用“Shang”搜索示例：

<ol id="omdbReturn">
  <li id="tt9376612">Shang-Chi and the Legend of the Ten Rings (2021)</li>
  <li id="tt8443704">Shei xian ai shang ta de (2018)</li>
  <li id="tt0156587">Hai shang hua (1998)</li>
  <li id="tt2169322">Bei Jing yu shang Xi Ya Tu (2013)</li>
  <li id="tt6628322">Shang hai bao lei (2019)</li>
  <li id="tt2458314">Da Shang Hai (2012)</li>
  <li id="tt0492473">Kan shang qu hen mei (2006)</li>
  <li id="tt0101864">Fei zhou he shang (1991)</li>
  <li id="tt9081562">Bi bei shang geng bei shang de gu shi (2018)</li>
  <li id="tt11448076">Xuan ya zhi shang (2021)</li>
</ol>

Answer 1

感谢 mplungjan 向我们指出 datalist。我已经更新了上面的 html 和 javascript，所以它引用了一个数据列表，而不是创建一个 html 列表，然后单击还有另一段代码可以获取关联的 imdb ID 并运行查询以将数据推送到表单中：

html:

<li>
    <label for="search">OMDb lookup:</label>
    <input list="omdb" id="search" placeholder="start typing film title" type="input" name="search" maxlength="255" onkeyup="waitForIt()">
    <datalist id="omdb">
    </datalist>
</li>

javascript：

var timer = null;
function waitForIt() {
       clearTimeout(timer); 
       timer = setTimeout(omdbSearch, 1000)
};
function omdbSearch() {
  let searchTerm = encodeURI(document.getElementById("search").value);
  $.getJSON('https://www.omdbapi.com/?apikey=<apikey>&type=movie&page=1&s=' + searchTerm).then(function(omdbResults){
    if(omdbResults.Response !== 'False') {
        let tot = omdbResults.totalResults;
        if(tot > 10) {
            tot = 10;
        }
        omdbRes = "";
        for(i=0; i < tot; i++) {
            omdbRes += '<option id="' + omdbResults.Search[i].imdbID + '" value="' + omdbResults.Search[i].Title+' ('+omdbResults.Search[i].Year + ')" />';
        }
        document.getElementById("omdb").innerHTML = omdbRes;
        
        var inputs = document.querySelectorAll('input[list]');
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].addEventListener('change', function() {
            var optionFound = false,
              datalist = this.list;
            for (var j = 0; j < datalist.options.length; j++) {
                if (this.value == datalist.options[j].value) {
                    Populate(datalist.options[j].id);
                    break;
                }
            }
          });
        }
        
        function Populate(imdb){
            $.getJSON('https://www.omdbapi.com/?apikey=<apikey>&type=movie&plot=full&i=' + imdb).then(function(omdbMovie){
                document.getElementById("film").value = omdbMovie.Title + " (" + omdbMovie.Year + ")";
                document.getElementById("image_url").value = omdbMovie.Poster;
                document.getElementById("desc").value = omdbMovie.Plot;
                document.getElementById("imdb").value = "https://www.imdb.com/title/" + omdbMovie.imdbID + "/";
                
            });
        }
    }
  });
}

所以如果有人遇到需要做同样的事情，我就是这样处理的。您可以通过在搜索中添加分页来改进（我一直保留在第一页，限制为 10，因为我觉得这足以显示下拉菜单，人们可以输入更多内容来优化而不是滚动和搜索..）。