如圖,想要實現輸入關鍵詞,點擊搜索按鈕或者回車鍵都能進行搜索並返回。css
html部分代碼以下:html
js部分——ajax
1 function entersearch(){ 2 var event = window.event || arguments.callee.caller.arguments[0]; 3 if (event.keyCode == 13) 4 { 5 search(); 6 } 7 } 8 function search(){ 9 10 var con=$("#sear").val(); 11 12 $.ajax({ 13 url:"", 14 type:"get", 15 async : false, 16 contentType:"application/json;charset=UTF-8", 17 data:{"search":con}, 18 dataType:"json", 19 success:function(data){ 20 var searHtml=""; 21 for(var i=0;i<data.length;i++){ 22 var lv=data[i]; 23 searHtml+="<li><a href='detail.html?id="+lv.id+"'><span class='itemText'>"+lv.t1+"</span><span class='itemPrize'>"+lv.price+"</span><a></li>"; 24 } 25 $(".pullCon").html(searHtml); 26 }, 27 error:function(){ 28 console.log("搜索失敗") 29 } 30 }); 31 32 var divdisp=$(".pulldown").css("display"); 33 if (divdisp == "block") { 34 $(".pulldown").css("display","none"); 35 } else { 36 $(".pulldown").css("display","block"); 37 } 38
最後一部分是實現再次點擊button按鈕隱藏下拉出來的搜索結果!json