html部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智能搜索框</title><link rel="stylesheet" href="./search.css">
</head>
<body><!-- 页面结构 --><div class="search"><input class="search-input" type="text" autofocus="autofocus" placeholder="请输入关键字，用空格间隔关键字" value=""><button class="btn">搜索</button><ul class="search-result"></ul></div><script src="./search.js"></script>
</body>
</html>css部分
html,
body,
div {margin: 0;padding: 0;
}ul,
li {list-style: none;margin: 0;padding: 0;
}li {border: 1px solid #ccc;width: 500px;padding: 2px 1px;text-indent: 1rem;
}
li:hover{background-color: #efebeb;
}
li b{color: #f00;
}.search {width: 600px;margin: 5% auto;
}input {width: 500px;height: 30px;font-size: 1.1rem;text-indent: 1rem;
}button {font-size: 1.1rem;margin-left: 10px;width: 60px;height: 35px;
}JavaScript 部分
/*
** date:2021.12.20
** name:@前端小白？
*/
//1.2 分析数据结构
var arr=["薇某某偷逃税被罚13.41亿","延安新增确诊病例轨迹公布","澳门回归22周年","蕾神之锤vs宏慌之力，结局如何敬请期待","我很怀疑是不是汪峰汪半壁又要开演唱会了","起底吴某凡吴某凡吴某凡背后的疯狂饭圈","环球时报评王某宏必须凉"
]
//2.0功能入口
var inputStr=document.querySelector(".search-input");
var strUl=document.querySelector(".search-result");
var btn=document.querySelector(".btn");
inputStr.oninput=function(){//2.0if(this.value.length==0){strUl.innerHTML="";return;}//2.1获取input框的值var keywords=this.value;//2.2消除两边空格keywords=keywords.trim();//2.3消除中间空格keywords=trimAll(keywords)// 2.4拆分关键字var keysArr = keywords.split(" ");// 2.5关键字去重keysArr=removeRepetition(keysArr);// 2.6从数据源匹配结果var resultsAll=matching(keysArr,arr);// 2.7渲染renders(resultsAll,strUl);for (let i = 0; i < resultsAll.length; i++) {let list=document.querySelectorAll(".search-result>li")list[i].addEventListener("click",function(){var URL="http://www.baidu.com/s?ie=UTF-8&wd=";if(list[i].innerHTML==""){window.location.href=URL;}else{ URL="http://www.baidu.com/s?ie=UTF-8&wd="+ list[i].innerHTML;console.log(list);window.location.href=URL;}});}
}//2.8点击搜索btn.addEventListener("click",skip);// 工具函数
// 消除中间空格
function trimAll(_keywords){for(let i=0; _keywords.indexOf(" ")!=-1; i++){_keywords = _keywords.replace(" ", " ");}
return _keywords;
}
// 消除关键字重复
function removeRepetition(_keysAll){var iteam=[];for (let i = 0; i < _keysAll.length; i++) {if(iteam.indexOf(_keysAll[i])==-1){iteam.push(_keysAll[i])}}return iteam;
}
//匹配结果
function matching(_keysAll,_arr){var iteam=[];for (let i = 0; i< arr.length; i++) {var flag=true;for (let j = 0; j < _keysAll.length; j++) {if(!_arr[i].includes(_keysAll[j])){flag=false;break;}} if(flag){iteam.push(_arr[i]);}}return iteam
}//渲染
function renders(_resultsAll,_strUL) {_strUL.innerHTML=""; for (let i = 0; i < _resultsAll.length; i++) {var iteamLi=document.createElement("li");iteamLi.innerHTML=_resultsAll[i];_strUL.appendChild(iteamLi);}
}
//挑转
function skip(){var URL="http://www.baidu.com/s?ie=UTF-8&wd=";if(strUl.innerHTML==" "){window.location.href=URL;}else{URL="http://www.baidu.com/s?ie=UTF-8&wd="+strUl.innerHTML;window.location.href=URL;}
}业余之作
