智能搜索框

admin • • 前端

 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.0
    if(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;
      }
}

业余之作

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>