input输入search查找关键词时，实现（即时搜索）边输入边输出目标内容的例子代码

 

 

 

先充电：

（1）change事件    触发事件必须满足两个条件：

        a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

        b）当前对象失去焦点(onblur)

（2）keypress  恩，还好。。。。。就是能监听键盘事件，鼠标复制黏贴操作他就无能为力了。

（3）propertychange（ie）和input事件

        input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化。

 

 

        propertychange，只要当前对象属性发生改变。

 

 

再充电：

 

test() 方法用于检测一个字符串是否匹配某个模式。

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

test和match都是字符串的方法，都可以用来判断是否匹配正则表达式。

不同的是：

test方法返回的是布尔值true 和false

 

match方法返回的是字符串。

实现思路：

1、检测输入框值的变化，获取到输入框的值（searchval ），

2、遍历页面已加载每一条数据（<ul class='allorder'>...</ul>），正则匹配，如果该条数据符合，则将该条数据拼接到变量html里，

3、将上述变量html的值加载到新容器里(<ul class='selectorder'>...</ul>)，将原盛放数据的模块隐藏，新容器显示。

首先，html准备两个容器（例子中为如下两个标红的ul标签）。一个用来显示原有的页面加载过来的所有数据，另一个用来盛放查找时符合查找要求的数据。

    

例子：html代码：（后台语言为php）

 

<section class="recordlist">

      <div class="searchbox">

          <span class="searchicon"><i class="icon iconfont icon-search"></i></span>

          <input class="search" type="text" name="searchid" placeholder="请输入编号或用户编号" value="{$searchid}">

       </div>

      <ul class="allorder"> {notempty name="clinic_info"} {volist name="clinic_info" id="clinic_info"}

          <li class="list-item"> {if condition="$clinic_info['order_status'] eq 1"}

              <a href="{:url('detailclinicrecord',['clinicid'=>$clinic_info['order_id']])}" title="记录详情"> {else /}

              <a href="{:url('alreadypay',['clinicid'=>$clinic_info['order_id']])}" title="记录详情"> {/if}

                  <div class="item-time">{$clinic_info['cn_treatment_time']}</div>

                  <div class="item-namebox">

                      <h3 class="doc-name">

                      <span class="name-txt">编号：{$clinic_info['order_id']} ----- {$clinic_info['m_invitation_code']}用户</span>

                      </h3>

                  </div>

                  <p class="item-reson">就诊原因：<span class="reson-txt">{$clinic_info['chief_complaint']}</span>

                  </p>

              </a>

          </li>

         {/volist} {else /} <link rel="stylesheet" href="{$Think.CSS_URL}g_empty.css">

          <div class="orders-empty">

              <div class="imgbox">

              <img src="{$Think.IMG_URL}dataempty.png" alt="您还未有开方记录">

          </div>

          <p class="info-text">您还未有订单记录</p>

          </div>

      {/notempty}

      </ul>

      <ul class="selectorder hidden"></ul>

</section>

 

实现即时输入输出查找数据的代码块：

 $('.search').bind('input propertychange', function() {selectmember();});
    function selectmember(){
        var html = '';
        searchval = $.trim($("input[name='searchid']").val());
        console.log(searchval)
        if(searchval !== ''){
         $(".recordlist>ul.allorder li").each(function(){
            var row=$(this).html();
            var rows=$(this).find('span').html();
            var reg=new RegExp("^.*"+searchval+".*$");
            if(rows.match(reg)){
                html+="<li class='list-item'>"+row+"</li>";
            }
         });
               console.log(html)
         $(".recordlist>ul.allorder").hide();
         $(".recordlist>ul.selectorder").html(html);
         $(".recordlist>ul.selectorder").show();
        }else{
               $(".recordlist>ul.allorder").show();
               $(".recordlist>ul.selectorder").hide();
      }
    }
</script>

 

 

最后效果图：

 

 

输入 88 立即显示

 

 

// cell报表datagrid的搜索框事件
$("#search").click(function(){
   returnParams();
});
$('#search-input').keydown(function () {
   if (event.keyCode == 13) {
      returnParams();
   };
});

$('#search-input').bind('input propertychange', function() {
   var searchVal = $(this).val().trim();
   if(!searchVal){
      returnParams();
   }

});

function returnParams(){
   var searchVal = $("#search-input").val().trim();
   var params = {
      "agencyId": agency_id,
      "reportId": report_id,
      "isLoadtask": false,
      "fuzzy_query":""
   }
   if(searchVal){
      params.fuzzy_query = searchVal;
   }
   $('#datagridBoxId').datagrid('reload',params);
}