<center>ajax跟jsonp一起实现百度下拉框</center>

本是古典何须时尚 2021-11-23 04:24 272阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title>百度</title>
    	<style type="text/css">
    		*{
    			margin:0px;
    			padding:0px;
    			color:#000;
    		}
    		div{
    			text-align: center;
    			margin-top:200px;
    		}
    		input{
    			width:460px;
    			height: 40px;
    			line-height: 40px;
    			border:1px solid #ccc;
    			background: transparent;
    			font-size:30px;
    		}
    		ul{
    			list-style: none;
    			width: 460px;
    			position:relative;
    			border:1px solid #ccc;
    			border-top:none;
    		}
    		li{
    			cursor:pointer;
    			font-size:16px;
    			padding:5px 2px;			
    		}
    		li:hover{
    			background:pink;
    		}
    	</style>
    </head>
    <body>
    <div>
    	<input type="text" id="input">
    </div>
    <script type="text/javascript">
    	var input,script,ul;
    	var input = document.getElementById('input');//关键字输入框
    	//给关键输入框添加input事件
    	input.oninput = function(){
    		if(script){
    			script.remove();
    			script = null;
    		}
    		var wd = this.value;//输入的当前文字
    		//创建一个script标签用于请求数据,数据会以函数的实参传入
    		script = document.createElement('script');
    		script.src = "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1445,21092,18560,29518,28519,29099,29568,28833,29220,26350,29589&wd="+wd+"&req=2&pbs=%E7%99%BE%E5%BA%A6%E7%BF%BB%E8%AF%91&csor=5&pwd=baid&cb=callback&_=1563970627537";
    		document.body.appendChild(script);
    
    	}
    	//定义一个函数用于处理传回的数据
    	function callback(data){
    		if(ul){
    			ul.removeEventListener('click',clickHandler);
    			ul.remove();
    			ul = null;
    		}
    		//console.log(data)
    		//拿到联想的关键字的数组
    		var arr = data.g;
    		//把数据渲染到ul中
    		ul = document.createElement('ul');
    		//给li添加点击事件,会跳转到响应的搜索页面,使用事件委托
    		ul.addEventListener('click',clickHandler);
    		ul.style.left = input.offsetLeft+"px";
    		var str = '';
    		for(var i=0;i<arr.length;i++){
    			str+="<li>"+arr[i].q+"</li>";
    		}
    		ul.innerHTML = str;
    		document.body.appendChild(ul);		
    	}
    	function clickHandler(e){
    		//判断你如果点击的不是ul中的li元素,返回
    		if(e.target.constructor !== HTMLLIElement) return;
    		//页面跳转
    		location.href = "https://www.baidu.com/s?wd="+e.target.innerHTML+"&rsv_spt=1&rsv_iqid=0xc2d920150000c00f&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ts_2&rsv_sug3=3&rsv_sug1=3&rsv_sug7=100&rsv_sug2=1&prefixsug=100&rsp=2&inputT=1993&rsv_sug4=1993"
    
    	}
    </script>
    </body>
    </html>