JavaScript~ajax~百度搜索

最新推荐文章于 2020-09-27 19:35:33 发布

原创最新推荐文章于 2020-09-27 19:35:33 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax案列专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的百度搜索建议实现方案，通过监听输入框的输入事件并使用JSONP跨域请求百度搜索建议API来动态生成搜索建议列表。点击列表中的项会自动填充到输入框，并能直接跳转到百度搜索页面。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度搜索建议</title>
	<script>
		/*
			接口地址：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
				* 参数
					* json=1
					* cb=getData
					* wd=html5
			1) 键盘按下 生成script 请求数据 
			2）获取数据生成html(要用到全局函数)
			3）点击搜索跳转
			4）文字写入input的value;
		 */

		document.addEventListener('DOMContentLoaded',()=>{

			let keyword = document.getElementById('keyword');
			let res = document.getElementById('res');
			let btn = document.querySelector('button');	
			// console.log(keyword,res,btn)
			
			let script;
			let timer;
			//全局函数（获取数据生成html）jsonp需要全局函数
			window.getData = function(data){
				console.log(data);//可以为随意参数
				let ul = document.createElement('ul');
				ul.innerHTML = data.s.map(function(item){
					return `<li>${item}</li>`;
				}).join('');

				//每次输入前清除前一次的，避免生成多个ul
				res.innerHTML = '';
				res.appendChild(ul)
			}

			//键盘按下 生成script 请求数据 
			keyword.oninput = function(){
				// clearTimeout(timer)
				var _kw = keyword.value;
				//避免输入每个字符都请求一次，以至于请求过多
				timer = setTimeout(function(){
					// console.log(_kw);
					script = document.createElement('script');
					script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=getData&wd=${_kw}`;
					document.body.appendChild(script);
				},100)
				
			}

			//点击跳转
			btn.onclick = function(){
				let _kw = keyword.value;
				// console.log(_kw);
				location.href = `http://www.baidu.com/s?wd=${_kw}`;
			}

			//点击内容添加到input
			res.onclick = function(e){
				let target = e.target;
				if (target.tagName.toLowerCase()=== 'li') {
					console.log(target.innerText);
					keyword.value = target.innerText;
				};
			}

		});
	</script>
</head>
<body>
	<h1>百度搜索建议</h1>
	<input type="text" id="keyword"><button>搜索</button>
	<div id="res"></div>
</body>
</html>