您的位置：首页 > 其它

ajax分页效果、分类联动、搜索功能

2017-07-31 22:57 369 查看

一、使用smarty+ajax+php实现无刷新分页效果

效果图

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>jsonp</title>
6     <link rel="stylesheet" href="../css/reset.css">
7     <style>
8         .con{
9             width:400px;
10             margin:50px auto;
11             font-size: 0;
12         }
13         .con input{
14             width:270px;
15             height:6px;
16             padding:15px;
17         }
18         .con button{
19             width:96px;
20             height:40px;
21             line-height:40px;
22             border:none;
23             font-size:14px;
24             padding: 0;
25             background:#3385ff;
26             border-bottom:1px solid #2d78f4;
27             color:#fff;
28         }
29         .search_content{
30             font-size:14px;
31             border:1px solid #ccc;
32             margin-top:-1px;
33             display: none;
34         }
35         .search_content li{
36             padding: 2px 15px;
37             margin-top:5px;
38         }
39         .search_content li:nth-child(1){
40             margin-top: 0;
41         }
42         .search_content li:hover{
43             background:#cccccc;
44             cursor: pointer;
45         }
46     </style>
47     <script src="../js/jquery-1.12.4.min.js"></script>
48     <script>
49         $(function(){
50             $("#search").keyup(function(){
51                 var keyword = $(this).val();
52                 //使用$.trim()方法去除字符串两端的空白字符
53                 if($.trim(keyword).length == 0){
54                     return false;
55                 }
56                 $.ajax({
57                     url:"https://sug.so.360.cn/suggest?",
58                     type:"get",
59                     dataType:"jsonp",
60                     data:{word:keyword}
61                 }).done(function(data){
62                     if(data.p == true){
63                         var str = "";
64                         if(data.s.length>0){
65                             for(var i=0;i<data.s.length;i++){
66                                 str +="<li>"+data.s[i]+"</li>";
67                             }
68                             $(".search_content").html(str);
69                             $(".search_content").show();
70                         }else{
71                             $(".search_content").html(str);
72                             $(".search_content").hide();
73                         }
74
75                     }
76                     console.log(data)
77                 }).fail(function(error){
78                     console.log("error");
79                 })
80             });
81             $(".search_content").delegate("li","click",function(){
82                 $("#search").val($(this).html());
83                 $(this).parent().hide();
84             })
85         })
86     </script>
87 </head>
88 <body>
89 <div class="con">
90     <input id="search" type="text"  placeholder="请输入内容">
91     <button>搜索</button>
92     <ul class="search_content"></ul>
93 </div>
94 </body>
95 </html>

搜索功能代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航