在HTML的搜索栏中创建下拉列表

Question

我已使用HTML中的基本语句在网页上创建了一个下拉列表，但该下拉列表位于页面的正文部分。我在topnav中添加了一个搜索栏，并一直试图移动此下拉列表，因此一旦有人单击该字段或开始键入，它就会出现在该列表中，但是下拉列表中的数据来自SQL数据库（公司），而不是预定义的列表，例如。我正在使用本地ASP来从SQL中提取数据，并使用HTML和Java来填充数据。

有人知道如何编写HTML和Java，以便一旦有人单击搜索栏，包含我的数据的下拉列表就会显示在搜索栏中？我的代码在下面。

  

这是我本来可以工作的逻辑

<select id="containerlist" onchange="newcontainer()"></select>

  

这是我一直在尝试的逻辑

<div class="search-container">
 <input id='input' type="text" placeholder="Container #.." onkeyup="filterFunction()"<select id="containerlist" onchange="newcontainer()"</select>/>
<button type="submit">Search</button>
</div>

  

我也尝试了下面的代码，但是不确定我将在选项的值部分输入什么...

 <div class="search-container">
      <input type="text" list="containerlist" />
        <datalist id="list">
          <option> id="containerlist" value="?"</option>
        </datalist>
    </div>

输出应该是，我可以单击搜索栏，然后开始输入，并且在我继续优化搜索时将显示下拉列表并进行过滤。