JavaScript和JQuery实现必应搜索

最新推荐文章于 2022-07-16 13:16:45 发布

tyilack_小小黑

最新推荐文章于 2022-07-16 13:16:45 发布

阅读量966

点赞数

本文链接：https://blog.csdn.net/u014520745/article/details/50807414

版权

javascript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

最终效果图如下：

html代码如下：

<!doctype html>
<html lang="en">
<head>

	<meta charset="UTF-8">
	<!--IE浏览器兼容性设置，按照正常的文档模式来渲染-->
	<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_frame/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script> -->

	<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;
})

tyilack_小小黑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和JQuery实现必应搜索

最终效果图如下：html代码如下： bing search 搜索结果1 搜索结果2 --> css代码如下：* { padding: 0; margin: 0;}body { background-c
复制链接

扫一扫

专栏目录