Ajax实现搜索框提示功能
作者:農碼一生 时间:2023-09-11 20:51:21
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端口...........');
}
});
来源:https://www.cnblogs.com/wml-it/p/15809251.html
标签:Ajax,搜索框,提示,功能
0
投稿
猜你喜欢
详解Node.js如何开发命令行工具
2024-05-05 09:21:19
如何利用python检测图片是否包含二维码
2021-04-13 01:42:53
python解析PDF程序代码
2021-05-17 03:16:55
如何使用pyinstaller打包32位的exe程序
2021-12-17 10:15:20
pandas删除部分数据后重新生成索引的实现
2023-11-18 04:44:13
影响SQL Server性能的关键三个方面
2009-02-13 16:59:00
配置php网页显示各种语法错误
2023-11-14 07:23:04
在ASP中连接使用数据库
2007-09-22 10:46:00
MySQL的命令行提示符及其表达的意思
2008-03-17 13:34:00
利用keras加载训练好的.H5文件,并实现预测图片
2021-01-18 21:18:57
python实现根据给定坐标点生成多边形mask的例子
2022-03-22 14:40:15
利用jupyter网页版本进行python函数查询方式
2022-05-23 17:27:12
CentOS 7.6安装MySQL 5.7 GA版的教程图解
2024-01-27 11:47:48
Python字符串、整数、和浮点型数相互转换实例
2023-09-20 18:05:52
用Python实现一个简单的能够发送带附件的邮件程序的教程
2023-04-08 11:45:48
pytest自动化测试数据驱动yaml/excel/csv/json
2023-06-18 14:19:47
Python word实现读取及导出代码解析
2021-05-11 07:56:47
pygame实现贪吃蛇游戏
2021-09-23 00:29:21
详解Python安装scrapy的正确姿势
2023-04-04 01:38:14
Python机器学习NLP自然语言处理基本操作词袋模型
2023-08-20 06:23:30