Ajax学习笔记——搜索框内容自动提示案例

最新推荐文章于 2023-06-04 14:09:28 发布

是行是行啊

最新推荐文章于 2023-06-04 14:09:28 发布

阅读量248

点赞数

分类专栏： Ajax学习文章标签： js ajax

本文链接：https://blog.csdn.net/weixin_45655555/article/details/106785036

版权

Ajax学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax学习笔记——搜索框内容自动提示案例

在node.js搭建的服务器进行

在这里插入图片描述

步骤：

获取搜索框并为其添加用户输入事件
获取用户输入的关键字
向服务器端发送请求并携带关键字作为请求参数
将响应数据显示在搜索框底部

存在的问题与解决办法

问题①如图：
在这里插入图片描述

如何在用户输入完成以后再向服务端发送请求？
在oninput触发的时候，在请求外面包裹一层延时定时器，让请求不要立即发送。由于用户是连续输入，oninput会被连续触发，当再一次触发oninput的时候，先将上一次的定时器清除，定时器清除了请求也就不会被发送了，这就保证上一次的输入不会有请求发布，然后再开启一个新的定时器，用于当前这一次输入，发送请求，循环往复直到用户输入完成才会发送一次请求

问题②如图：
在这里插入图片描述
当输入框清空/没内容的时候，就隐藏下拉框，也不需要向服务器发送请求了。

客户端代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 150px;
		}
		.list-group {
			display: none;
		}
		</style>
</head>
<body>
	<div class="container">
		<div class="form-group">
			<input type="text" id="search" class="form-control" placeholder="请输入搜索关键字">
			<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 type="text/javascript">
	//获取搜索框
	var searchInp = document.getElementById('search');
	// 获取提示文字的存放容器
	var listBox = document.getElementById('list-box');
	var timer = null;
	//添加用户输入事件
	searchInp.oninput = function(){
		//清除上一次开启的定时器
		clearTimeout(timer);
		//获取用户输入的内容
		var search = this.value;
		if (search.trim().length == 0) {
			listBox.style.display = 'none';
			//且阻止程序向下运行
			return;
		}

		timer = setTimeout(function(){
			ajax({
			type:'get',
			url:'http://localhost:3000/searchAutoPrompt',
			data:{
				key:search
			},
			success:function(result){
				// 使用模板引擎拼接字符串
				var html = template('tpl',{result:result});
				// 将拼接好的字符串显示在页面中
				listBox.innerHTML = html;
				//显示ul容器
				listBox.style.display = 'block';
			}
		})
		},800);	
	}
	</script>
</body>
</html>

服务器端代码：

//搜索框内容自动提示
app.get('/searchAutoPrompt',(req,res)=>{
	//关键字
	const key = req.query.key;
	// 提示文字列表
	const list = [
		'ajax请求的五个步骤',
		'ajax同步和异步的区别',
		'ajax请求',
		'ajax同步',
		'ajax面试题',
	];
	//搜索结果
	let result = list.filter(item=>item.includes(key));
	res.send(result)
})