如何为HTML输入表单的OMDb搜索结果实现类谷歌下拉提示样式

现有实现基础 #

你已经完成了核心功能开发：输入防抖、OMDb接口调用、搜索结果渲染、点击结果自动填充表单字段，仅需调整样式和少量交互即可实现类谷歌搜索的下拉提示效果。
你当前使用的HTML代码如下：

<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>

当前使用的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 = '';
        }
    });
}

动态生成的搜索结果HTML结构如下：

<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>

优化实现方向 #

• 首先调整定位逻辑：给搜索输入框的父元素添加position: relative属性，给结果列表#omdbReturn添加position: absolute、top: 100%、left: 0属性，让列表脱离文档流悬浮在输入框下方，不会挤压其他页面元素的位置。
• 调整列表基础样式：给#omdbReturn设置和输入框相同的宽度，添加白色背景、边框、柔和阴影，取消默认的列表缩进和项目符号，设置max-height和overflow-y: auto避免结果过多时列表过长，同时设置足够大的z-index值保证下拉层显示在所有其他页面元素上方。
• 优化选项交互样式：给列表下的li元素添加合适的内边距，设置hover状态的背景高亮效果，鼠标悬浮时显示为指针样式，提升点击感知。
• 可选交互优化：可以添加点击页面空白区域自动清空下拉列表的逻辑，也可以补充键盘上下键选择选项、回车确认填充的交互，完全对齐谷歌搜索的操作习惯。

内容的提问来源于stack exchange，提问作者Sam