智能搜索框

 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;}
}

业余之作

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！