页面内有一个input输入框，实现在数组arr查询命中词并要求a
2018-12-24 本文已影响0人
glory_前端
<!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>
