此案例使用的时ajax技术实现百度下拉，其中有利用jsonp解决跨域的问题，目前刚接触到ajax技术，在这里分享记录一下学习的痕迹！<!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(){ //获取到输入框的值 var kw = $("#keyWord").val(); //发送请求的地址 var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + kw; //请求到的函数 querySUG(url); }); function querySUG(url){ $(‘#list‘).html = ‘‘; //使用ajax获取到请求 $.ajax({ type:‘get‘, url:url, dataType:‘jsonp‘, async: true, jsonp:‘cb‘, success:function(data){ //遍历得到的数据数组 var ul = $("<ul></ul>"); for(var i = 0; i < data.s.length; i++){ //得到每一项数据 var li = $(‘<li></li>‘).append(data.s[i]); $(ul).append(li); } $(‘#list‘).append(ul).show(); $(‘#list‘).find(‘li‘).hover(function(){ $(this).css(‘background‘,‘lightGreen‘); },function(){ $(this).css(‘background‘,‘lightGray‘); }); },error:function(){ console.log(‘faile‘); } }) } })
</script></body></html>
原文地址：https://www.cnblogs.com/zhaocong/p/8616004.html
时间： 2024-11-10 07:29:53