zoukankan      html  css  js  c++  java
  • 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按钮隐藏下拉出来的搜索结果!

    浅喜似苍狗,深爱如长风
  • 相关阅读:
    Delphi中的接口和抽象类
    设计模式之六大原则
    C 标准库
    linux 管道和重定向
    linux c创建静态库(.a)
    一个C语言程序
    C#动态创建lambda表达式
    linq中order by 和group by (含lambda表达式实现)以及综合案例
    微信扫码登陆原理
    二维码扫码支付原理
  • 原文地址:https://www.cnblogs.com/Zhang-jin/p/8883448.html
Copyright © 2011-2022 走看看