input输入框中的下拉列表html
时间: 2024-05-23 21:06:07 浏览: 114
HTML5搜索输入框下拉列表代码
根据提供的引用内容,可以看出这是一个JavaScript函数,用于向指定的HTML元素中添加下拉列表。下面是一个简单的例子,演示如何使用该函数创建一个下拉列表:
```javascript
// HTML代码
<input type="text" id="myInput">
<div id="myList"></div>
// JavaScript代码
function appendLis(searchListID, textNameID, displayListID, actionFun, inputStr) {
// 省略函数体
}
var input = document.getElementById("myInput");
var list = document.getElementById("myList");
input.addEventListener("input", function() {
var html = appendLis("searchList", "textName", "displayList", "actionFun", input.value);
list.innerHTML = html;
});
```
在上面的代码中,我们首先获取了一个输入框和一个用于显示下拉列表的空`<div>`元素。然后,我们使用`addEventListener()`函数为输入框添加了一个`input`事件监听器。每当用户在输入框中输入内容时,该监听器就会被触发。在监听器中,我们调用了`appendLis()`函数,并将其返回的HTML代码赋值给了`<div>`元素的`innerHTML`属性。这样,每当用户在输入框中输入内容时,下拉列表就会被更新。
阅读全文