使用百度接口,模仿百度搜索联想功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>EMS-jquery查询</title> <style type="text/css"> #sug{ position: absolute; left: 50%; margin-left: -150px; width: 300px; background: lightGreen; height: 40px; text-align: center; } #sug input{ margin-top: 10px; } #list{ position: absolute; left: 50%; top:50px; width: 200px; margin-left: -150px; height: auto; background: lightBlue; display: none; } #list ul{ padding-left: 0px; margin: 0px; } #list ul li{ background: lightGray; line-height: 30px; list-style: none; padding-left: 10px; margin-top: 0px; cursor: pointer; } #list ul li.on{ background: lightGreen; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div id="sug"> <div> <input type="text" id="keyWord" autocomplete=off> <input type="button" value="百度一下" id="btn"> </div> </div> <div id="list"> </div> <script type="text/javascript"> $(function(){ $('#keyWord').keyup(function(e){ var kd = $('#keyWord').val(); // var url ='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+kd;// var url="https://www.baidu.com/sugrec?prod=pc&wd="+kd//新的接口,本地访问的话要给sugrec加值,模仿pc端访问 querySUG(url); }); }); function querySUG(url){ document.getElementById('list').innerHTML = ''; $.ajax({ type : "get", async: true, url : url, dataType : "jsonp", jsonp: "cb",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) //jsonpCallback:"callback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名(类似:jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);) success : function(data){ console.log(data) var tag = '<ul>'; for(var i=0;i<data.g.length;i++){ tag += '<li>'+data.g[i].q+'</li>'; } tag += '</ul>'; $('#list').html(tag).show(); $('#list').find('li').hover(function(){ $(this).css('background','lightGreen'); },function(){ $(this).css('background','lightGray'); }); }, error:function(){ console.log('fail'); } }); } </script> </body> </html>
本文来自博客园,作者:三线码工,转载请注明原文链接:https://www.cnblogs.com/shangrao/p/12872740.html