input搜索框的搜索功能

如图，想要实现输入关键词，点击搜索按钮或者回车键都能进行搜索并返回。

html部分代码如下：

js部分——

 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按钮隐藏下拉出来的搜索结果！

 

posted @ 2018-04-19 15:42  吾本人间一叶茶  阅读(8399)  评论(0)  编辑  收藏  举报
Live2D