js 搜索框匹配

<div id="bigbox">
       <input type="text" id="box">
</div>

 input{
            margin: 300px  400px;
            width: 300px;
           padding: 10px;
           font-size:16px; 

          }
          li{
            list-style: none;
          }
          #bigbox{
            position: relative;
          }
          #one{
            position: absolute;
            top: 325px;
            left: 400px;
          }
          ul{
            border: 1px solid #ccc;
            padding: 10px;
          }

//模拟假数据
var datas=["a","abv","jng","abvt","hjuy","hj","abvtry","abvtryi"]
      //获取input
      var textbox=document.getElementById("box");
      var bigbox=document.getElementById("bigbox");
      //用户释放键盘事件
      textbox.onkeyup=function(){
            //获取输入的内容
          var textval=this.value;
          //定义新数组
          var newarr=[];
          for(var i=0;i < datas.length;i++){
            //获取datas数组的每一个值
            var every=datas[i];
            //比较
            if(every.indexOf(textval)===0){
                  //若输入值与数组中有一致的，添加到新数组中
                 newarr.push(every);
            }
          }

          //创建div之前，先判断有没有，解决重叠问题
          var  one =document.getElementById("one");
          if(one){
             bigbox.removeChild(one);
          }
          //如果没有匹配，就不会创建
          if(newarr.length===0){
             return;
          }
          //如果为空，结构没有
          if(textval===""){
            return;
          }
          //动态生成结构
           var one=document.createElement("div");
           one.id="one";
           bigbox.appendChild(one);
            var uls=document.createElement("ul");
            one.appendChild(uls);
            //根据新数组创建li
            for(var i=0;i<newarr.length;i++){
                var item=newarr[i];
                 var li=document.createElement("li");
                 //有兼容问题
                 li.innerText=item;
                  uls.appendChild(li);
            }
      }