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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM