一、JQ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQ实现</title> <style> * { margin: 0; padding: 0; } body { background: #333 url('http://img.mukewang.com/52da5e7d0001c0f813660768.jpg') no-repeat top/cover; } #container { position: relative; width: 600px; margin: 100px auto; } img { display: block; float: left; } #search { float: left; width: 440px; background: #FFF; margin: 5px; margin-left: 15px; padding-left: 10px; } #searchText { display: block; float: left; width: 400px; height: 40px; line-height: 40px; font-size: 20px; border: none; outline: none; } #submit { display: block; float: left; background: url('http://img.mukewang.com/52da5df800012b1e02220137.jpg') no-repeat -30px -107px; width: 30px; height: 30px; margin: 5px; border: none; } #suggest { display: none; width: 450px; position: absolute; top: 45px; left: 122px; background: #FFF; border-top: 1px solid #CCC; list-style: none; } #suggest li { height: 28px; line-height: 28px; padding-left: 10px; } </style> </head> <body> <div id='container'> <img src="http://img.mukewang.com/52da5e530001eea901070053.jpg"> <div id='search'> <form action="https://www.bing.com/search" target='_blank'> <input type="text" id='searchText' name='q' autocomplete="off"> <input type="submit" id='submit' value=""> </form> </div> <ul id='suggest'></ul> </div> </body> <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> <script> $('#searchText').on('keyup',function(){ $.ajax({ type: 'GET', async: false, url: "http://api.bing.com/qsonhs.aspx?type=cb&cb=callbackfunction&q=" + $('#searchText').val(), dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'callbackfunction', success: function(data){ console.log(data); suggest(data); }, error: function(data){ console.log('e',data.status); } }) }); function suggest(data){ if(data.AS.FullResults){ var d = data.AS.Results[0].Suggests; var suggestLi = ''; for(var i=0;i<d.length;i++){ suggestLi += '<li>' + d[i].Txt + '</li>' } $('#suggest').html(suggestLi); $('#suggest').show(); }else{ $('#suggest').hide(); } }; $('#suggest').on('click','li',function(e){ location.href = 'https://www.bing.com/search?q=' + $(e.target).html(); }); $(document).on('click',function(){ $('#suggest').hide(); }); $('#searchText').on('click',function(e){ e.stopPropagation(); }); </script> </html>
二、JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #333; } #bg-div{ position: relative; text-align: center; margin: 0 auto; height: 690px; width: 1228px; background: url(http://img.mukewang.com/52da5e7d0001c0f813660768.jpg); } .logo{ float:left; background: url(http://img.mukewang.com/52da5e530001eea901070053.jpg) no-repeat; margin: -4px 18px 0 0; height: 53px; width: 107px; } .search-warp{ float:left; background-color:#fff; width:407px; padding:5px; } #search-input{ float:left; border: 0; font-size: 100%; width: 375px; outline: none; height:29px; line-height:29px; } .search-submit{ float:left; cursor: pointer; height: 29px; width: 29px; background: transparent url(http://img.mukewang.com/52da5df800012b1e02220137.jpg) no-repeat -30px -107px; border: 0; } #search-box{ position:absolute; top:20%; left:8%; } #suggest { position: absolute; display: none; background: #FFF; width: 415px; border: 1px solid #CCC; } #suggestResult { list-style: none; line-height: 29px; color: #999; } #suggestResult li:hover{ background: #eee; text-decoration: underline; } </style> <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> <script> function callbackFunction(data){ console.log(data); var html = ''; var d = data.AS.Results[0].Suggests; for(var i=0;i<d.length;i++){ html += '<li>'+d[i].Txt+'</li>' } var suggestResult = document.getElementById('suggestResult'); suggestResult.innerHTML = html; var suggest = document.getElementById('suggest'); suggest.style.left = document.getElementById('search-box').offsetLeft + document.getElementById('bg-div').offsetLeft + 125 + 'px'; suggest.style.top = document.getElementById('search-box').offsetTop + 39 + 'px'; suggest.style.display = 'block'; } window.onload = function(){ var search = document.getElementById('search-input'); search.onkeyup = function(){ console.log('dian') var script = document.createElement('script'); var searchText = search.value; if(searchText == ''){ var suggest = document.getElementById('suggest'); suggest.style.display = 'none'; }else{ script.src = 'http://api.bing.com/qsonhs.aspx?type=cb&cb=callbackFunction&q=' + searchText; document.getElementsByTagName('head')[0].appendChild(script); } } search.onclick = function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } var suggest = document.getElementById('suggest'); suggest.onclick = function(event){ var searchTarget = event.target.innerHTML; location.href = 'https://www.bing.com/search?q=' + searchTarget; } } document.onclick = function(){ var suggest = document.getElementById('suggest'); suggest.style.display = 'none'; } </script> </head> <body> <div id="bg-div"> <div id="search-box"> <div class="logo"></div> <form action="https://www.bing.com/search" target="_blank" method="get" class="search-warp"> <input id="search-input" type="text" name="q"> <input class="search-submit" type="submit" value=""/> </form> </div> </div> <div id='suggest'> <ul id='suggestResult'></ul> </div> </body> </html>