Ajax实现搜索框提示功能
时间：2022-06-24 09:00:17|栏目：JavaScript代码|点击： 次
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" />
<style type='text/css'>
.list-group{
display: none;
}
.container{
padding-top: 150px;
}
</style>
</head>
<body>
<div class='container'>
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索的关键字" id="search"/>
<ul class="list-group" id="list-box">
<!-- <li class="list-group-item">提示文显示的地方</li> -->
</ul>
</div>
</div>
<script src="./js/ajax.js"> </script>
<script src="./js/template-web.js"></script>
<script type="text/html" id="tpl">
{{ each result }}
<li class="list-group-item">{{$value}}</li>
{{/each}}
</script>
<script>
//获取搜索框
var searchInput=document.getElementById('search');
//获取提示文字的存放问起
var listBox=document.getElementById('list-box');
//存储定时器的变量
var timer =null;
//输入框输入触发事件，并清除防抖/节流
searchInput.oninput=function(){
//清除上一次开启的定时器
clearTimeout(timer);
//获取用户输入的内容
var key= this.value;
//如果没有在搜索框输入内容
if(key.trim().length==0){
//将提示下拉信息隐藏
listBox.style.display='none';
//阻止程式向下执行
return;
}
//开启定时器，让请求延迟发送
timer = setTimeout(
function(){
//向服务器发送请求
ajax({
type:'get',
url:'http://localhost:3000/searchAutoPrompt',
data:{
key: key
},
success:function(result){
console.log(result);
//使用模板引擎拼接字符串
var html= template('tpl',{result:result});//获取的result为数组
//拼接好的字符串显示在页面
listBox.innerHTML=html;
console.log(html);
//显示ul容器
listBox.style.display='block';
}
});
},800 );
}
</script>
</body>
</html>
Ajax封装方法：
function ajax(options){
//定义默认
var defaults ={
type:'get',
url:'',
data:{},
Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
success:function(){},
error:function(){}
};
//用options中的对象覆盖defaults中对象
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.Headers['Content-Type'];
//post请求时必须设置的
xhr.setRequestHeader('Content-Type',contentType);
//判断请求参数类型
if(contentType=='application/json'){
xhr.send(JSON.stringify(defaults.data));
}else{
xhr.send(JSON.stringify(params));
}
}else{
xhr.send();
}
//监听onload事件,当接收完响应数据后触发
xhr.onload=function(){
//xhr.getResponseHeader()
//获取响应头部数据
var contentType=xhr.getResponseHeader('Content-Type');
//服务端返回的数据
var responseText=xhr.responseText;
if(contentType.includes('application/json')){
//把JSON字符串转换为JSON 对象
responseText = JSON.parse(responseText);
}
//对http状态码判断，判断是否等于200
if(xhr.status==200){
//调用处理成功情况的函数
defaults.success(responseText,xhr);
}else{
//调用处理失败的情况函数
defaults.error(responseText,xhr);
}
}
}
服务器端测试代码：
/**** server.js ****/
// 一个简单的后端路由
//1.引入express框架
const express=require('express');
const fs=require('fs');
//2.引入路径处理模块
const path=require('path');
const bodyParser=require('body-parser');//post
//3.创建web服务器
const app=express();
//post
//extended:返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());
//4.静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')));
//5.配置路由 request 请求 response 响应,回应
//get路由 ，对应12.html
app.get('/searchAutoPrompt',(request,response)=>{
//响应
const key = request.query.key;
var result=["无匹配内容"];
if (key == "合肥") {
result=['合肥蜀山区','合肥瑶海区','合肥肥西','合肥肥东','合肥新站区'];
response.send(result)
} else if(key == "阜阳") {
result=['阜阳市阜南县','阜阳卷膜','阜阳火车站','阜阳格拉条'];
response.send(result)
}else {
response.send(result)
}
});
//6.监听端口,进行回调
app.listen(3000,(err)=>{
// 函数体
if(!err) {
console.log('测试ajax请求的服务器开启成功了!');
console.log('正在监听3000端口...........');
}
});
