可以使用HTML的<select>和<input>标签结合JavaScript来创建带有搜索功能的下拉列表。
首先，需要在HTML中创建一个<select>标签，里面包含多个<option>标签，表示下拉列表中的选项。然后，在<select>标签之前添加一个<input>标签，用于接收用户的搜索关键词。最后，使用JavaScript监听输入框中的变化事件，动态过滤下拉列表中的选项，只显示符合搜索关键词的选项。
代码示例：
<h3>带有搜索功能的下拉列表：</h3>
<input type="text" id="search-input" placeholder="请输入关键词">
<select id="select-list">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="watermelon">西瓜</option>
<option value="pear">梨子</option>
</select>
<pre>
<script>
const selectList = document.getElementById('select-list');
const searchInput = document.getElementById('search-input');
// 监听输入框变化事件
searchInput.addEventListener('input', function() {
const keyword = searchInput.value.trim().toLowerCase(); // 获取输入框中的关键词
for (let i = 0; i < selectList.options.length; i++) {
const option = selectList.options[i];
const text = option.text.toLowerCase();
if (text.includes(keyword)) { // 如果选项文本包含关键词，显示该选项
option.style.display = 'block';
} else { // 否则隐藏该选项
option.style.display = 'none';
}
}
});
</script>
</pre>
解释说明：
- 使用`<h3>`标签表示小标题。
- 使用`<pre>`标签来显示代码块，保留代码格式。
- 使用`<input>`标签的`type="text"`表示文本输入框，`id="search-input"`表示该输入框的id，`placeholder="请输入关键词"`表示输入框中的提示文字。
- 使用`<select>`标签的`id="select-list"`表示下拉列表的id。
- 使用JavaScript获取`select`和`input`标签的DOM对象，并通过`addEventListener`方法监听`input`事件，即输入框中的变化事件。
- 在事件处理程序中，使用`trim()`和`toLowerCase()`方法获取输入框中的关键词，然后遍历下拉列表中的所有选项，判断选项文本是否包含关键词，如果包含，则将该选项显示出来，否则隐藏该选项。