html：用script实现搜索框

1：body部分：

 <div>
        <input id="search" type="text">
        <button onclick="ss()">搜索</button>
 </div>
        <ul></ul>
        <p id="total">共N条</p>

2：css样式自定，如宽高，字体样式，大小，背景等。

3：script部分：

   var books = ["警世名言","红楼梦","百年孤独","老人与海","人生","平凡的世界","三国演义","遥远的救世主","钢铁是怎样炼成的","白夜行","魔鬼搭讪学","童年","白鹿原","孟子","解忧杂货铺","飘","嫌疑人X的献身","活着"];  //数据源
   var ul=document.querySelector("ul"); //获取ul
   var iptSearch =document.getElementById("search");
   var pTotal=document.getElementById("total");
  
   function setUl(data){   //date是需要显示的数据
       ul.innerHTML=''; //先清空，为后续做准备
       pTotal.innerHTML="共"+data.length+"条";  //p显示的为数据的长度
       for (var i=0;i<data.length;i++){
           ul.innerHTML+=`<li>${data[i]}</li>`;  //将数据填充
       }
   }
   setUl(books);   //输出books

//ss
   function ss(){
   var s=iptSearch.value;    //1.拿到需要搜索的数据 input.value
    if(s==''){  
        setUl(books);    // 如果搜索为空，显示原数据源
        return;
    }
   
   var arr=[];    // 2.不为空，与数据源进行比对，返回一个新的数组，定义一个新数组
    for (var i=0;i<books.length;i++){  /遍历books
       
    if(books[i].indexOf(s) !== -1){     // 检索字符串
        //包含s的内容
        arr.push(books[i]);

    }
    }
    // 3.显示新数组的内容
    setUl(arr);
}