搜索框获取焦点时获取下拉列表

1. 通过 JavaScript 监听输入框的 focus 事件，当输入框获取焦点时触发。

2. 在 focus 事件的处理函数中，向后端发送请求获取下拉列表数据。

3. 后端返回数据后，用 JavaScript 将数据渲染成下拉列表，并将列表添加到 DOM 中。

4. 给下拉列表中的每个选项绑定 click 事件，当用户点击某个选项时，将选项的值填充到输入框中。

5. 当用户离开输入框时，清空下拉列表并隐藏它。

示例代码：

HTML：

<input type="text" id="search-box">
<ul id="dropdown-list"></ul>

JavaScript：

const searchBox = document.getElementById('search-box');
const dropdownList = document.getElementById('dropdown-list');

searchBox.addEventListener('focus', () => {
  // 向后端发送请求获取下拉列表数据，并渲染到 dropdownList 中
});

dropdownList.addEventListener('click', (event) => {
  // 将选项的值填充到输入框中
});

searchBox.addEventListener('blur', () => {
  // 清空下拉列表并隐藏它
});