- A+
所属分类：Web前端
场景：搜索框，模糊搜索
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); } }新手自己学习,有什么问题请大家多多谅解
