-
最終版：$("#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.+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
提交
取消