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

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

　　用到的方法为：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. iOS在导航栏上居中显示分段控件(UISegmentedControl)

    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:nil]; segmentedCont ...

  2. SSIS 包部署 Package Store 后，在 IS 中可以执行，AGENT 执行却报错

    可以执行 SSIS Package ,证明用 SSIS Package 的账户是可以执行成功的.SQL Server Agent 默认指定账号是 Network Service. 那么可以尝试一下将 ...

  3. 一键生成APP官网

    只需要输入苹果下载地址,安卓市场下载地址,或者内测下载地址,就能一键生成APP的官网,方便在网上推广. 好推APP官网 www.hotapp.cn/app

  4. LeetCode All in One 题目讲解汇总(持续更新中...)

    终于将LeetCode的免费题刷完了,真是漫长的第一遍啊,估计很多题都忘的差不多了,这次开个题目汇总贴,并附上每道题目的解题连接,方便之后查阅吧~ 477 Total Hamming Distance ...

  5. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  6. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  7. undefined

    概述 undefined有多重角色,通常情况下,我们所说的undefined都指的是全局对象的一个属性"undefined". 语法 undefined 描述 在JavaScrip ...

  8. 【JAVA面试题系列一】面试题总汇--JAVA基础部分

    JAVA基础 基础部分的顺序: 基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法 线程的语法,集合的语法,io 的语法,虚拟机方面的语法 每天几道,持续更新!! 1.一个". ...

  9. php中会话保持 session 与cooker

    会话保持 1.session Session:在计算机中,尤其是在网络应用中,称为"会话控制".Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 ...

  10. ASP.NET Core 中文文档 第三章 原理（14）服务器

    原文:Servers 作者:Steve Smith 翻译:谢炀(Kiler) 校对:许登洋(Seay).姚阿勇(Dr.Yao) ASP.NET Core 已完全从承载应用程序的 Web 服务器环境中分 ...