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

红太狼 2021-01-20 06:24 376阅读 0赞

**先充电：**

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

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

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

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

（3）propertychange（ie）和input事件

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

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

**再充电：**

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

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

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

不同的是：

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

match方法返回的是字符串。

![70][]

实现思路：

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>

最后效果图：

![70 1][]

输入 88 立即显示

![70 2][]

// 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();
       }
    
    });

[70]: /images/1611123831537.png
[70 1]: /images/1611123855593.png
[70 2]: /images/1611123875645.png