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

146 阅读 0 评论 97 点赞

我是靠谱客的博主愉快期待，这篇文章主要介绍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">

<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>

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 $('.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 立即显示

复制代码

1
2
3
4
5
6
7
8
9
10
// cell报表datagrid的搜索框事件
$("#search").click(function(){
   returnParams();
});
$('#search-input').keydown(function () {
   if (event.keyCode == 13) {
      returnParams();
   };
});

复制代码

1
2
3
4
5
6
7
$('#search-input').bind('input propertychange', function() {
   var searchVal = $(this).val().trim();
   if(!searchVal){
      returnParams();
   }

});

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}