<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
margin: 0;
padding: 0;
}
.box input{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<input type="input" id="inp">
</div>
<script src="common.js"></script>
<script>
var keyWords = ["小杨才是最帅的", "小刘才是最棒的", "小薛才是最好的", "小样也是不错的", "传智播客是最好的", "传说在传值有个很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"]
my$('inp').onkeyup = function(){
var text = this.value
var tempArr = []
if(my$('dv')){
my$('box').removeChild(my$('dv'));
}
for(var i = 0 ; i < keyWords.length ; i++){
// console.log(keyWords[i].indexOf(text) == 0)
if(keyWords[i].indexOf(text) == 0){
tempArr.push(keyWords[i])
}
}
console.log(tempArr)
if(this.value.length == 0 || tempArr.length == 0){
if(my$('dv')){
my$('box').removeChild(my$('dv'));
}
return
}
var dvObj = document.createElement('div')
console.log(dvObj)
my$('box').appendChild(dvObj)
dvObj.id = 'dv';
dvObj.style.width = '200px';
dvObj.style.height = '200px';
dvObj.style.border = '1px solid #e60012;'
for(var i = 0; i< tempArr.length; i++){
var pObj = document.createElement('p')
dvObj.appendChild(pObj)
setInnerText(pObj, tempArr[i])
pObj.style.margin = 0;
pObj.style.padding = 0;
pObj.style.cursor = 'pointer'
pObj.style.marginTop = '5px';
pObj.style.marginLeft = '5px'
pObj.style.fontSize = '12px'
//鼠标进入
pObj.onmouseover = function(){
this.style.backgroundColor = 'yellow'
}
pObj.onmouseout = function(){
this.style.backgroundColor = 'white'
}
}
}
function setInnerText(element, text){
if(typeof element.textContent == "undefined"){
element.innerText = text
}else{
element.textContent = text
}
}
</script>
</body>
</html>