JavaScript和JQuery实现必应搜索

清疚 2022-08-20 15:25 152阅读 0赞

最终效果图如下：

![Center][]

html代码如下：

<!doctype html>
    <html lang="en">
    <head>
    
    	<meta charset="UTF-8">
    	
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<title>bing search</title>
    	<link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
    	<div class="bg-div">
    		<div class="search-box">
    			<div class="logo"></div>
    			<form id="search-form">
    				<input type="text" class="search-input-text" autocomplete="off" name="q" id="search_input" />
    				<input type="submit" class="search-input-button" value="" id="search_submit">
    			</form>
    		</div>
    	</div>
    	
    	<div class="suggest" id="search-suggest">
    		<ul id="search-result">
    			<li>搜索结果1</li>
    			<li>搜索结果2</li>
    		</ul>
    	</div>
    
    
    	
    
    	<script type="text/javascript" src="js/index2.js"></script>
    </body>
    </html>

css代码如下：

* {
    	padding: 0;
    	margin: 0;
    }
    
    body {
    	background-color: #333;
    }
    
    .bg-div{
    	background-image: url('../images/river.jpg');
    	width: 1228px;
    	height: 690px;
    	margin: 0 auto;
    	position: relative;
    }
    
    .logo {
    	background-image: url('../images/logo.png');
    	width: 107px;
    	height: 53px;
    	float: left;
    	margin: -4px 18px 0 0;
    }
    
    form {
    	float: left;
    	background-color: #fff;
    	padding: 5px;
    }
    
    .search-input-text {
    	border: 0;
    	float: left;
    	height: 25px;
    	line-height: 25px;
    	outline: none;
    	width: 350px;
    	font-size: 16px;
    }
    
    .search-input-button {
    	border: 0;
    	background-image: url('../images/search-button.png');
    	width: 29px;
    	height: 29px;
    	float: left;
    }
    
    .search-box {
    	position: absolute;
    	top: 200px;
    	left: 300px;
    }
    
    #search-suggest {
    	width: 388px;
    	background-color: #fff;
    	border: 1px solid #999;
    	display: none;
    }
    
    .suggest ul {
    	list-style: none;
    }
    
    .suggest ul li {
    	padding: 3px;
    	font-size: 14px;
    	line-height: 25px;
    	cursor: pointer;/*手型*/
    }
    
    .suggest ul li:hover {
    	text-decoration: underline;
    	background-color: #e5e5e5;
    }

jQuery实现必应搜索：

//jQuery实现功能
    $(function() {
    	$("#search_input").bind("keyup", function() {
    		var searchText = $("#search_input").val();
    		/*$.get(
    			"http://api.bing.com/qsonhs.aspx?q="+searchText
    			, function(data) {
    
    				console.log(data);
    
    				var d = data.AS.Results[0].Suggests;
    				var html = "";
    				for(var i = 0; i < d.length; i++) {
    					html += "<li>"+d[i].Txt+"</li>";
    				}
    				$("#search-result").html(html);
    
    
    				$("#search-suggest").show().css({
    					top : $("#search-form").offset().top + $("#search-form").height()+10,
    					left : $("#search-form").offset().left,
    					position : "absolute",
    				});
    			}
    			, "json");*/
    
    		$.ajax({
    			type : "GET",
    			url:"http://api.bing.com/qsonhs.aspx?type=cb&q="+searchText,
    			dataType : "jsonp",
    			jsonp:'cb',
    			success : function(data) {
    				if (data == null) {
    					$("#search-suggest").hide();
    					return false;
    				}
    				if (data.AS == null) {
    					$("#search-suggest").hide();
    					return false;
    				}
    				if(data.AS.Results == null){
    					$("#search-suggest").hide();
    					return false;
    				}
    				if (data.AS.Results[0] == null) {
    					$("#search-suggest").hide();
    					return false;
    				}
    				if (data.AS.Results[0].Suggests == null) {
    					$("#search-suggest").hide();
    					return false;
    				}
    
    				var d = data.AS.Results[0].Suggests;
    				var html = "";
    
    				for(var i = 0; i < d.length; i++) {
    
    					html += "<li>"+d[i].Txt+"</li>";
    				}
    				$("#search-result").html(html);
    
    
    				$("#search-suggest").show().css({
    					top : $("#search-form").offset().top + $("#search-form").height()+10,
    					left : $("#search-form").offset().left,
    					position : "absolute",
    				});
    			}
    		})
    	});
    
    	$(document).bind("click", function() {
    		$("#search-suggest").hide();
    	});
    
    	//事件代理
    	$(document).delegate("li", "click", function() {
    		var keyword = $(this).text();
    		location.href = "http://cn.bing.com/search?q="+keyword;
    	});
    
    	$("#search-form").submit(function() {
    		var keyword = $("#search_input").val();
    		console.log("word="+keyword);
    		//if (keyword == null) {return false;}
    		location.href = "http://cn.bing.com/search?q="+keyword;
    	});
    });

原生JavaScript实现功能：

//原生JavaScript实现功能
    window.onload = function() {
    		
    	addEvent("search_input", "keyup", function() {
    
    		var searchText = getDOM("search_input").value;
    		var element = getDOM("search-suggest");
    		//--------------
    		//正常情况下
    		/*ajaxGet("http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q="+searchText, function(data) {
    			if (data == null) {
    				element.style.display = "none";
    				return false;
    			}
    			if (data.AS == null) {
    				element.style.display = "none";
    				return false;
    			}
    			if(data.AS.Results == null){
    				element.style.display = "none";
    				return false;
    			}
    			if (data.AS.Results[0] == null) {
    				element.style.display = "none";
    				return false;
    			}
    			if (data.AS.Results[0].Suggests == null) {
    				element.style.display = "none";
    				return false;
    			}
    
    			var d = data.AS.Results[0].Suggests;
    			var html = "";
    
    			for(var i = 0; i < d.length; i++) {
    
    				html += "<li>"+d[i].Txt+"</li>";
    			}
    
    			var sf = getDOM("search-form");
    			element.innerHTML = html;
    			element.style.top = getElementTop(sf) + 38 + "px";
    			element.style.left = getElementLeft(sf) + "px";
    			element.style.position = "absolute";
    			element.style.display = "block";
    		});*/
    
    		//---------------------
    
    		//跨域的情况
    
    		ajaxGet2("http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q="+searchText);
    
    		
    		
    	});
    
    
    }
    
    var getDOM = function(id) {
    	return document.getElementById(id);
    }
    
    /*
    *正常情况下这样做
    *JavaScript的Ajax实现方法
    *url 传入的地址
    *callback 回调方法
    */
    var ajaxGet = function(url, callback) {
    	var _xhr = null;
    	/*
    	*window.XMLHttpRequest是非IE浏览器
    	*window.ActiveXObject 是IE浏览器
    	*/
    	if (window.XMLHttpRequest) {
    		_xhr = new window.XMLHttpRequest();
    	} else if (window.ActiveXObject) {
    		_xhr = new ActiveXObject("Msxml2.XMLHTTP");
    	}
    
    	_xhr.onreadystatechange = function() {
    		if (_xhr.readyState == 4 && _xhr.status == 200) {
    			callback(JSON.parse(_xhr.responseText));
    		}
    	}
    	//第三个参数设置成false表示采用异步的方式
    	_xhr.open("get", url, false);
    	_xhr.send(null);
    
    }
    
    
    //------------------------------------
    //跨域情况下这样做
    var ajaxGet2 = function(url) {
    	var JSONP = document.createElement("script");
    	JSONP.src = url;
    	document.getElementsByTagName("body")[0].appendChild(JSONP);
    }
    
    var callback = function(data) {
    
    	var searchText = getDOM("search_input").value;
    	var element = getDOM("search-suggest");
    
    	if (data == null) {
    		element.style.display = "none";
    		return false;
    	}
    	if (data.AS == null) {
    		element.style.display = "none";
    		return false;
    	}
    	if(data.AS.Results == null){
    		element.style.display = "none";
    		return false;
    	}
    	if (data.AS.Results[0] == null) {
    		element.style.display = "none";
    		return false;
    	}
    	if (data.AS.Results[0].Suggests == null) {
    		element.style.display = "none";
    		return false;
    	}
    
    	var d = data.AS.Results[0].Suggests;
    	var html = "";
    
    	for(var i = 0; i < d.length; i++) {
    
    		html += "<li>"+d[i].Txt+"</li>";
    	}
    
    	var sf = getDOM("search-form");
    	element.innerHTML = html;
    	element.style.top = getElementTop(sf) + 38 + "px";
    	element.style.left = getElementLeft(sf) + "px";
    	element.style.position = "absolute";
    	element.style.display = "block";
    }
    
    //------------------------------------
    
    /**
    *id 需要绑定事件的元素id
    *event 需要绑定的事件
    *fn 事件的回调函数
    *这里使用addEventListener的方法绑定事件，相比onclick事件，
    *它的优点在于可以绑定多个事件
    */
    var addEvent = function(id, event, fn) {
    	//这里用一个 ||document，为了防止getDOM为null的时候程序会报错
    	var el = getDOM(id) || document;
    	/*
    	el.addEventListener适用于非IE浏览器，el.attachEvent适用于IE浏览器
    	*/
    	if (el.addEventListener) {
    		el.addEventListener(event, fn, false);
    	} else if (el.attachEvent) {
    		el.attachEvent("on"+event,fn);
    	}
    }
    
    /**
    *获取元素距离浏览器左边的距离
    */
    var getElementLeft = function(element) {
    	/*offsetLeft只能拿到距离父元素左边的距离，
    	所以需要用循环获取距离浏览器左边的距离*/
    	var actualLeft = element.offsetLeft;
    	var current = element.offsetParent;
    
    	while(current != null) {
    		actualLeft += current.offsetLeft;
    		current = current.offsetParent;
    	}
    
    	return actualLeft;
    }
    
    //获取元素距离浏览器顶部的距离
    var getElementTop = function(element) {
    	var actualTop = element.offsetTop;
    	var current = element.offsetParent;
    
    	while(current !== null) {
    		actualTop += current.offsetTop;
    		current = current.offsetParent;
    	}
    
    	return actualTop;
    }
    
    
    //事件代理
    var delegateEvent = function(target, event, fn) {  
        addEvent(document, event, function(e) {  
            if(e.target.nodeName == target.toUpperCase()) {  
                fn.call(e.target);  
            }  
        });  
    };
    
    delegateEvent("li", "click", function() {
    	var keyword = this.innerHTML;
    	location.href = "http://cn.bing.com/search?q=" + keyword;
    })

[Center]: /images/20220731/9e7663662a7940f68b2fc9ce8a724720.png