<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
#div1{
margin:200px auto;
position: relative;
}
ul{
list-style: none;
margin: 0 auto;
background-color: #ededed;
color: #3b200c;
width: 400px;
border: none;
}
li{
cursor: pointer;
}
input{
display: block;
margin: 0 auto;
line-height: 40px;
height: 40px;
width: 400px;
font-size: 20px;
background-color: #ede387;
border: none;
}
</style>
</head>
<body>
<div id="div1">
<input type="text" id="input" placeholder="有autocomplete的输入框" />
<ul id="ul">
</ul>
</div>
</body>
<script>
var arr = ['a', 'apple', 'abandon', 'bilibili', 'beep', 'before', 'become', 'being', 'highmaintains', 'by', 'bye', 'banana']
input.addEventListener('input', function (event) {
var _value = event.target.value.trim()
if (_value) {
autoComplete(_value, arr)
}
else {
ul.innerHTML = ''
}
})
function autoComplete(str, arr) {
var lis = []
arr.forEach((word) => {
if (word.startsWith(str)) {
lis.push('<li>' + word + '</li>')
}
})
ul.innerHTML = lis.join('')
}
function addToInput(li) {
var _txt = li.innerText
input.value = _txt
}
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
addToInput(event.target)
}
})
</script>
</html>
页面内有一个input输入框，实现在数组arr查询命中词并要求autocomplete效果
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 首先来说，由于作者刚接触网站的开发，这篇文章写得有点乱，主要是记录给自己看的，怕以后忘记了，方便到时候查阅，若给您...
- html 批注：在点击按钮的时候之前就执行了blur事件，所以这个时候是无法把发送到后台的接口给拦截住的。 给2个...
