-
最终版：$("#search-input").bind("keyup",function(){ var searchText = $("#search-input").val(); $.get("http://api.bing.com/qsonhs.aspx?q="+searchText,function(d){ var d = d.AS.Results[0].Suggests; var html = ""; for(var i=0; i<d.length; i++){ html += "<li>"+d[i].Txt +"</li>"; } //把交互的数据动态添加到ul下面 $("#search-result").html(html); //服务器有返回结果才展示智能提示 $("#search-suggest").show().css({ position:'absolute', top:$("#search-form").offset().top+$("#search-form").height()+10, left:$("#search-form").offset().left }); },"json"); }); $(document).bind('click',function(){ $("#search-suggest").hide(); }); $(document).delegate('li','click',function(){ //获取下拉框里点击的文本,跳转到指定页面搜索要找的关键字 var word = $(this).text(); location.href= "http://cn.bing.com/search?q="+word; });查看全部
-
事件代理对比delegate 不会传id一般是class 标签名查看全部
-
点击document文档，下拉框消失查看全部
-
发送请求地址必须和服务器在同一域名下。 nginx he fiddler 工具设置快速搭建把html页面放api.bing.com域名下查看全部
-
ajax 的对比查看全部
-
html:查看全部
-
js部分:查看全部
-
js jquery dui对比查看全部
-
css 2: .suggest{width:288px; background-color:#fff; border:1px solid #999; } .suggest ul{list-style:none; } .suggest ul li{padding:2px; font-size:14px; line-height:20px; cursor:pointer;} .suggest ul li:hover{text-decoration:underline; background-color:#e5e5e5;} </style> </head> <body> <div class="bg-div"> <div class="box"> <div class="logo"></div> <form> <input type="text" class="text"/> <input type="submit" class="button" value=""/> </form> </div> </div> <div class="suggest" id="search-suggest" > <ul> <li>结果1</li> <li>结果2</li> </ul> </div>查看全部
-
css 1: <style type="text/css"> *{padding:0; margin:0;} body{background-color:#333;} .bg-div{width:1228px; height:690px; background-image:url(../img/TB.ico); background-repeat:no-repeat; background-size:100% auto; margin:0 auto; } .box{position:absolute; top:200px; left:300px; } .logo{background-image:url(../img/GM.ico); background-repeat:no-repeat; background-size:100% auto; width:40px; height:40px; float:left; } form{float:left; background-color:#fff; padding:5px;} .text,.button{border:0; float:left;} .text{height:25px; line-height:25px; outline:none; width:250px;} .button{background-image:url(../img/DD.ico); background-repeat:no-repeat; background-size:100%; width:29px; height:29px; } .suggest{width:288px; background-color:#fff; border:1px solid #999; } .suggest ul{list-style:none; } .suggest ul li{padding:2px; font-size:14px; line-height:20px; cursor:pointer;}查看全部
-
搜索css部分：查看全部
-
开始展示：步骤一查看全部
-
写css流程查看全部
-
兼容：查看全部
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">以最新文档模式渲染，防止ie进入怪异模式，导致图片不够居中，查看全部
举报
0/150
提交
取消