input搜索框的搜索功能

如圖,想要實現輸入關鍵詞,點擊搜索按鈕或者回車鍵都能進行搜索並返回。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

相關文章
相關標籤/搜索