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>

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

 $('.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);
}

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

python编写一个函数、输入n为偶数时_编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+..-吾爱编程网...
今天吾爱编程为大家分享一个C语言的经典案例编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n, 当输入n为奇数时,调用函数 1/1+1/3+...+1/n的程序写法,有需要的小伙伴 ...
使用散列表进行查找【查找关键词：电话号码，名称】【平方取中法，除留余数法】【开放地址探测法，公共溢出区法】【计算ASL】
Library import pandas as pd import numpy as np import time 读取数据 df = pd.read_excel('重庆市印刷和记录媒介复制业754 ...
搜索不包含关键词_秘迹搜索——不记录关键词、不追踪、过滤广告的搜索引擎...
今天,我们带来了一个可以保护个人隐私的网络搜索服务--秘迹搜索.秘迹搜索不会记录用户输入的查询关键词,真正做到搜索不留痕,彻底摆脱定向广告的骚扰. 谈到保护隐私,先来看看其他的网络搜索引擎是如何获取用 ...
即时搜索：对于ios自带输入法输入中文时多次触发input事件的处理
实现移动端的即时搜索的最佳方案,一定是使用input propertychange事件了,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现多次触发input事件的情况,一开始可能由 ...
ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景
一. 代码环境 "react": "18.1.0", "antd": "^4.20.5", "typescri ...
el-input中，输入input和失去焦点blur时进行校验——正则表达式之只能输入数字和大写字母只能输入数字颜色值的正则表达式-3位和6位标签的回车事件
el-input中,输入input和失去焦点blur时进行校验--正则表达式之只能输入数字和大写字母 & 只能输入数字 & 颜色值的正则表达式-3位和6位 & 标签的回车事件 ...
前端 - 查找关键词 - 高亮 - 软考 - 程序员 - 简单编程算法计算
1.动态字符串替换所有关键词:new RegExp(K, 'gm'),K动态字符串,gm是表示替换所有动态字符 <!--源码来自原创:[小5]非常感谢您的支持,希望通过这些基础知识能够让您得到提 ...
写几个函数： ①输入10个职工的姓名和职工号； ②按职工号由小到大顺序排序，姓名顺序也随之调整； ③要求输入一个职工号，用折半查找法找出该职工的姓名，从主函数输入要查找的职工号，输出该职工姓名。
写几个函数: ①输入10个职工的姓名和职工号: ②按职工号由小到大顺序排序,姓名顺序也随之调整: ③要求输入一个职工号,用折半查找法找出该职工的姓名,从主函数输入要查找的职工号,输出该职工姓名. #i ...
jquery即时搜索查询插件jquery.search.js
jquery.search.js搜索插件是一款基于jquery的插件,任何一个input输入款均可即时转为查询框,可分为前台数据直接显示和后台传输数据显示两种方案! 文档说明:http://www. ...

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

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

最新文章

热门文章