欢迎光临
我的个人博客网站

js原生搜索框自动搜索

场景:搜索框,模糊搜索

HTML:

<body>   <div class="searchBox">     <input type="search" name="" placeholder="请输入" id="search">     <ul class="ulList">     </ul>   </div>   <script src="./js/ajax.js"></script>   <script src="./js/index.js"></script> </body>

SCSS:

.searchBox{   position: fixed;   top: 20%;   left: 50%;   width: 50%;   transform: translate(-50%);   #search{     width: 100%;     border: 1px solid #000;     height: 30px;     outline:none;     font-size: 16px;    }   .ulList{     list-style: none;     margin: 0;     padding: 0;     .liList{       font-size: 16px;       margin-top: -2px;       padding-left: 2px;       height: 30px;       line-height: 30px;       border: 1px solid #000;       border-top: none;     }   } }

JS:

//封装的ajax function ajax(Options) {   var defaults = {     type: 'GET',     url: '',     data: {},     header: {       'Content-Type': 'application/x-www-form-urlencoded'     },     success: function(res,xhr) {       console.log(res)     },     error: function (err,xhr) {       console.log(err)       console.log(xhr)     }   };    Object.assign(defaults, Options)    var xhr = new XMLHttpRequest();    var params = ''    for( var attr in defaults.data ){     params += attr + '=' + defaults.data[attr] +'&'   }    params = params.substr(0, params.length - 1)    if (defaults.type == 'GET') {     defaults.url = defaults.url + '?' + params   }    xhr.open(defaults.type, defaults.url)      if (defaults.type == 'POST') {     var contentType = defaults.header['Content-Type']      xhr.setRequestHeader('Content-Type', contentType)      if (contentType == 'application/json') {       xhr.send(JSON.stringify(defaults.data))     }else{       xhr.send(params)     }   }else{     xhr.send()   }    xhr.onload = function () {     var contentType = xhr.getResponseHeader('Content-Type')      var responseText = xhr.responseText      if( contentType && contentType.includes('application/json')){       responseText = JSON.parse(responseText)     }      if ( xhr.status >= 200 && xhr.status < 300 ) {       defaults.success(responseText, xhr)     }else{       defaults.error(responseText, xhr)     }   } }
var searchInput = document.getElementById('search'); var ulList = document.getElementsByClassName('ulList')[0]; var ulListNode = ulList.getElementsByTagName("li"); var timer = null;  //监听input尝试输入 searchInput.oninput = function () {   // 判断input除去空格后的长度是否为0   if (searchInput.value.trim().length == 0) {     // 为0则清除ul下所有li     for (let i = ulListNode.length; i > 0; i--) {       ulList.removeChild(ulListNode[i - 1])     }   } else {     //清除定时器     clearTimeout(timer);     //启动定时器,用来防抖     timer = setTimeout(function () {       // 发送请求       ajax({         url: 'http://127.0.0.1:8001/server',         data: {           keyWord: searchInput.value         },         header: {           'Content-Type': 'application/json'         },         success: function (res) {           // 清除ul里的子节点li,用的倒叙           for (let i = ulListNode.length; i > 0; i--) {             ulList.removeChild(ulListNode[i - 1])           }            //根据传回数据创建ul下的li           for (let i = 0; i < res.length; i++) {             var liNode = document.createElement("li")             liNode.classList.add('liList')             liNode.innerHTML = res[i]             ulList.appendChild(liNode)           }            //如果input中value为空清除ul下li           if ( searchInput.value == '') {             for (let i = ulListNode.length; i > 0; i--) {               ulList.removeChild(ulListNode[i - 1])             }           }         }       })     }, 300);   } }

新手自己学习,有什么问题请大家多多谅解

赞(0) 打赏
未经允许不得转载:张拓的天空 » js原生搜索框自动搜索
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏