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