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">

</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,搜索框,提示,功能

投稿

Ajax实现搜索框提示功能

猜你喜欢

详解Node.js如何开发命令行工具

如何利用python检测图片是否包含二维码

python解析PDF程序代码

如何使用pyinstaller打包32位的exe程序

pandas删除部分数据后重新生成索引的实现

影响SQL Server性能的关键三个方面

配置php网页显示各种语法错误

在ASP中连接使用数据库

MySQL的命令行提示符及其表达的意思

利用keras加载训练好的.H5文件,并实现预测图片

python实现根据给定坐标点生成多边形mask的例子

利用jupyter网页版本进行python函数查询方式

CentOS 7.6安装MySQL 5.7 GA版的教程图解

Python字符串、整数、和浮点型数相互转换实例

用Python实现一个简单的能够发送带附件的邮件程序的教程

pytest自动化测试数据驱动yaml/excel/csv/json

Python word实现读取及导出代码解析

pygame实现贪吃蛇游戏

详解Python安装scrapy的正确姿势

Python机器学习NLP自然语言处理基本操作词袋模型