首先要明白什么是模糊查询（废话又来了），就是根据关键字把列表中符合关键字的一项或某项罗列出来，也就是要检查列表的每一项中是否含有关键字，因此抽象一下就是一个字符串中是否含有某个字符或者字符串。

　　以下例子没有接触到后台数据的知识，只是查询当前表格中每一行所包含的关键字。

　　用到的方法为：string.indexOf(''); 找出字符串中某个字符的位置，而如果没有目标字符会返回-1。

实现代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="jquery-1.11.3.js"></script>

    <script type="text/javascript">

        $(function(){
　　　　　　　// 当触发回车事件 / 输入查询关键字改变时，调用dimSearch() 函数

            $("#Result1 tr:eq(1)").find("input").each(function(){

                $(this).keyup(function(){

                    $(this).val($(this).val().replace(/'/g,''));

                    if(event.keyCode == 13){

                        dimSearch();

                        return

                    }

                })　

                $(this).change(function(){

                    $(this).val($(this).val().replace(/'/g,''));

                    dimSearch();

                    return;

                })

            })

            function dimSearch(){

                var accountNameStr = $("#accountNameStr").val().replace(/'/g, '');

                var accountNoStr = $("#accountNoStr").val().replace(/'/g, '');

                var accountShortStr = $("#accountShortStr").val().replace(/'/g, '');

                var branchBankNoStr = $("#branchBankNoStr").val().replace(/'/g, '');

                var branchBankNameStr = $("#branchBankNameStr").val().replace(/'/g, '');

                var showTrs = $("#Result1 tr").eq(1).nextAll(); // 获取需要查询的所有tr

                showTrs.each(function(){

                    if( $(this).find("td:eq(1)").text().indexOf(accountNameStr) > -1

                        && $(this).find("td:eq(2)").text().indexOf(accountNoStr) >-1

                        && $(this).find("td:eq(3)").text().indexOf(accountShortStr) > -1

                        && $(this).find("td:eq(4)").text().indexOf(branchBankNoStr) > -1

                        && $(this).find("td:eq(5)").text().indexOf(branchBankNameStr) > -1

                    ){

                        $(this).show()

                    }else{

                        $(this).hide()

                    }

                })

                if( $("#Result1 tr").eq(1).nextAll("tr:visible").length == 0 ){

                    $("#Result1").append("<tr><td colspan='6' style='color: red'>没有符合条件的记录！</td></tr>")

                }

            }

        })

    </script>

</head>

<body>

    <table id="Result1">

        <tr>

            <th></th>

            <th>账户名称</th>

            <th>账户</th>

            <th>户名简称</th>

            <th>开户行号</th>

            <th>开户行名称</th>

            <th></th>

        </tr>

        <tr class="dim-check">

            <td></td>

            <td><input type="text" maxlength="50" id="accountNameStr" name="1" value=""></td>

            <td><input type="text" maxlength="50" id="accountNoStr" name="2" value=""></td>

            <td><input type="text" maxlength="50" id="accountShortStr" name="3" value=""></td>

            <td><input type="text" maxlength="50" id="branchBankNoStr" name="4" value=""></td>

            <td><input type="text" maxlength="50" id="branchBankNameStr" name="5" value=""></td>

        </tr>

        <tr>

            <td><input type="radio" name="accounts" value="634"></td>

            <td>安顺账号1</td>

            <td>060156300000123</td>

            <td>简称123</td>

            <td>31375635312</td>

            <td>中国银行股份有限公司</td>

        </tr>

        <tr>

            <td><input type="radio" name="accounts" value="634"></td>

            <td>安顺账号2</td>

            <td>0601001100000123</td>

            <td>安顺账号2-简称123</td>

            <td>3137565012</td>

            <td>南京银行股份有限公司</td>

        </tr>

        <tr class="">

            <td><input type="radio" name="accounts" value="634"></td>

            <td>安顺账号3</td>

            <td>0601001154520123</td>

            <td>安顺账号215</td>

            <td>38968599012</td>

            <td>建行有限公司</td>

        </tr>

    </table>

</body>

</html>

　　

js—模糊查询的更多相关文章

  1. js模糊查询案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js模糊查询

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 编写简易的JS输入框模糊查询匹配（附有源码和demo）

    前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...

  4. js前端实现模糊查询

    对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...

  5. js实现模糊查询

    1.简述 实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现. 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询. 前端直接使用字符串的indexOf()方法或者正则表达 ...

  6. 前端js模糊搜索（模糊查询）

    1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;&q ...

  7. js实现下拉框模糊查询

    keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...

  8. js的模糊查询

    在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用 但上次的项目中 又涉及到不试 ...

  9. 通过模拟数据，使用js在前端实现模糊查询下拉框功能实例教程

    所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果.本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能. 首先得准备一个文本框和显示数据列表的div元素,html代码 ...

随机推荐

  1. linux下mono的安装与卸载

    我很遗憾的告诉你,这里没有安装,为什么标题里加入安装俩字呢,因为如果不加的话你会搜到这篇文章吗?哈哈!别气馁,这里会给你些安装的tips! 源码安装,git安装:建议安装路径如下,至于为什么,我也讲不 ...

  2. ABP源码分析二十八：ABP.MemoryDB

    这个模块简单,且无实际作用.一般实际项目中都有用数据库做持久化,用了数据库就无法用这个MemoryDB 模块了.原因在于ABP限制了UnitOfWork的类型只能有一个(前文以作介绍),一般用了数据库 ...

  3. node之path模块

    node之path模块 原文链接 //引用该模块 var path = require("path"); 1.路径解析,得到规范化的路径格式 对window系统,目录分隔为'', ...

  4. ceph架构剖析

    unitedstack有云 :https://www.ustack.com/blog/ceph_infra/

  5. javascript中字符串的比较规则

    弄清这个还是很重要的,在字符排序中很有用处 非空字符串 > 空字符串 从第一个字符的charCode开始比较,大的就大 所有的字符都相同,就比较长度,长的大 '0'>'' '2'>' ...

  6. cookie——小甜品

    Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cookie英文意指饼干,不过在电脑术语中它可不像饼干那么简单.简单的说,Cookie就是服务器暂存放在你计算机上的一 ...

  7. Windows下MySQL的常用操作

    1.MySQL关闭与重启 1.MYSQL服务 我的电脑——(右键)管理——服务与应用程序——服务——MYSQL——开启(停止.重启动) 2.如果你没安装系统服务,可在命令行模式定位到mysql下的bi ...

  8. 从零开始编写自己的C#框架（23）——上传组件使用说明

    文章导航 1.前言 2.上传组件功能说明 3.数据库结构 4.上传配置管理 5.上传组件所使用到的类 6.上传组件调用方法 7.效果演示 8.小结 1.前言 本系列所使用的是上传组件是大神July开发 ...

  9. MUI APP关于页面之间的传值，plusready和自定义事件

    最近在用MUI开发这个APP,发现有时候这个plusready不起作用,表现在,这个页面如果重复打开,这个plusready就进不去,然后上一个页面传过来的值,就没法接收了.这个经过MUI官方确认,是 ...

  10. 单机静默安装GI软件并创建ASM实例和ASM磁盘组

    环境:RHEL 6.4 + Oracle 11.2.0.4 需求:单机静默安装GI软件并创建ASM实例和ASM磁盘组,为后续迁移数据库文件到ASM做准备 1. 安装配置GI软件 2. 创建ASM实例 ...