实现实时的输出搜索框的内容--类似百度的搜索框 ---笔记_asp 前端实时搜索实现(input框边输入边查询)-优快云博客

本文链接：https://blog.youkuaiyun.com/xk_initial/article/details/100678958

本文探讨了如何使用Ajax技术实现网页中输入框的实时搜索功能。通过对比onchange和input事件，阐述了使用定时器监听输入框变化并触发Ajax请求的实现方式，解决了实时搜索的延迟问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用ajax技术实现实时输入搜索框类似（笔记）

这是我不知道 input事件时的一个思路，直接给了三个定时器去监听搜索框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" class="ipt"/>
		<button class="btn">搜索</button>
		<ul class="list"></ul>
		
		<script src="js/jquery-3.4.1.js"></script>
		<script>

最初的思路利用触发onchange事件来发送请求
但效果并不好，原因在小结里

//onchange事件发送ajax
   		$(".ipt").change(function(){
   			$.ajax({
   				url:"https://api.apiopen.top/searchMusic",
   				data:{
   					name:$(".ipt").val(),
   				},
   				success:function(res){
   					const list=res.result;
   					for(var i=0;i<list.length;i++)
   					{
   						$(".list").append("<li>"+list[i].title+"</li>")
   					}
   				}
   			})
   		})

第二次的思路既然onchang过程不触发，那我就加定时器吧（自己去监听input框的改变），实时获取到input里面的值，

//        那我们选择就可以写代码了
var prev="";
   		var last="";
   		
   		setInterval(function()
   		{
   			last=$(".ipt").val();
   		},600);
   			
   		setInterval(function()
   		{
   			prev=$(".ipt").val();
   		},5000);
   		
   		
   		setInterval(function()
   		{
   			if(last===prev)
   			{
   				console.log(1);
   				return false;
   			}
   			else{
   				prev=last;
   				$.ajax({
   				url:"https://api.apiopen.top/searchMusic",
   				data:{
   					name:$(".ipt").val(),
   				},
   				success:function(res){
   					const list=res.result;
   					$("li").remove();
   					for(var i=0;i<list.length;i++)
   					{
   						$(".list").append("<li>"+list[i].title+"</li>")
   					}
   				}
   			})
   				console.log(2);
   			}
   		},600)
   	</script>
   </body>
</html>

小结

onchang事件为文本域发生改变时，具体来说是失去焦点时才会触发的事件，
input则是在文本框内容发改变时触发的事件

其他思路

可以监听使用键盘按下时去触发，即去监听document.onkeydown事件，但这样也并不好，因为是每次按下就触发，而我们并没有输入完，这样会请求出许多的错误。这样也并不好