Web_Ajax 模拟百度下拉提示框

最新推荐文章于 2026-04-28 16:49:02 发布

原创最新推荐文章于 2026-04-28 16:49:02 发布 · 238 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #ajax

Ajax 同时被 2 个专栏收录

3 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文详细介绍了如何利用Ajax技术实现类似百度搜索框的下拉提示功能。通过监听输入框的输入和聚焦事件，发送JSONP请求到百度接口获取建议数据，然后动态创建并展示li元素。在用户点击li项时，将选中的内容填充回输入框，并隐藏下拉列表。此外，当输入框失去焦点时，会自动隐藏下拉列表。整个过程涉及到了事件监听、Ajax请求、DOM操作和JSONP跨域数据交互。

Ajax 模拟百度下拉提示框

百度搜索地址栏提交：https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7525&req=2&csor=3&pwd=sd
百度提交的键名：wd=

步骤:

每次输入获取内容
调用ajax 请求百度数据
遍历返回的数据创建li 拼接li

*{
	margin:0;
	padding:0;
}
html,body{
	width:1001%;
	height:100%;
}
#box{
	width:70%;
	margin:0 auto;
}
#lg,#search{
	width:100%;
	position:relative;
}
#lg,img{
	text-align:center;
}
#inp,#btn{
	outlin:none;
	border:none;
	vertical-align:top;
}
#inp{
	margin-left:15%;
	width:55%;
	height:16px;
	padding:12px 16px;
	font-size:16px;
	border-radius:10px 0 0 10px;
	border:2px solod #c4c7ce;
}
#btn{
	cursor:pointer;
	width:15%;
	height:44px;
	line-height:45px;
	background-color:#4e6ef2;
	border-radius:0 10px 10px 0;
	font-size:17px;
	color:#fff;
	box-shadow:none;
	font-weight:400;
}
#btn:hover{
	background-color: #2d78f4;
}
ul{
	list-style:none;
	width:55%;
	padding:12px 16px;
	font-size:16px;
	border-radius:0 0 10px 10px;
	display:none;
	border:2px solid #4e6ef2;
	margin-top:-2px;
	margin-left:15%;
}
ul>li{
	height:35px;
	line-height:35px;
	text-indent:9px;
	cursor:pointer;
	color:black;
	font-size:14px;
}
ul>li:hover{
	background-color:#ccc;
}

<div id=#box>
	<div id=lg>
		<img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" height="129">
	</div>
	<div id="search">
		<!--禁用浏览器输入框的 自动补全-->
		<form action="https://www.baidu.com/s?rsv_spt=1&rsv_iqid=0xfff0e80200228169&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=7&rsv_sug1=6&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&inputT=1073&rsv_sug4=1519">
			<input autocompele="off" type="text" name="wd" id="inp"><button>百度一下</button>
			<ul id="resultList"></ul>
		</form>
	</div>
</div>

<script src="jquery-1.11.1.js"></script>
<script>
var maxResultList=5;
$(function(){
	//同时给当前输入框添加输入事件和获取焦点事件
	//这两个事件做的事情是一样的
	$("#inp").parent().on("input focus","#inp",function(){
		var val=$(this).val();
		//这个接口无法搜索a和b字母；
		if(val=="a" || val=="b" ||val==""){
			//输入框为空有两种情况1.刚获取焦点还未输入；2.删除干净了
			$("#resultList").hide();
			return;
		}
		$.ajax({
			url:"https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7525&req=2&csor=3&pwd=sd",
			dataType:"jsonp",
			jsonp:"cb",
			data:{
				wa:val
			},
			success:function(data){
				//console.log(data);
				var arr=data.g;
				//如果没有arr则不继续遍历了
				if(!arr){
					//表示本次请求没有数据
					$("#resulList").hide();
					return;
				}
				//先把ul显示出来
				//每次触发success表示有新的一些结果 那么就需要把之前的结果清空
				$("#resultList").empty().show();
				//规定最多遍历几次
				for(var i=0;i<maxResultList;i++){
					$("#resultList")append("<li>"+arr[i].q+"</li>")
				}				
			}
		})
	})
	//自带事件委托的绑定事件
	$("#resultList").on("mousedown","li",function(){
		//alert("li的鼠标按下了！");
		//把li的内容放入输入框里面
		$("#inp").val($(this).html());
		//并且把ul隐藏
		$("#resultList).hide();
	})
	//输入框失去焦点 隐藏ul
	$("#inp").blur(function(){
		//alert("输入框失去焦点了！");
		$("#resultList").hide();
		//这个失去焦点带来一个问题 会使li的点击事件获取内容失效
		//因为一旦鼠标刚刚按下则触发了失去焦点 li就隐藏了 点击事件就再也无法获取了
		//解决：把li的click修改成mousedown就可以了
	})
})
</script>