JavaScript和JQuery实现必应搜索

来源：互联网发布：中捷代购好还是淘宝好编辑：程序博客网时间：2024/05/03 07:25

最终效果图如下：

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

0 0