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

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

　　用到的方法为：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. mysql-5.6.34 Installation from Source code

    Took me a while to suffer from the first successful souce code installation of mysql-5.6.34. Just pu ...

  2. 数据库 oracle数据库基本知识

    sqlplus登录 普通用户登录 c:\>sqlplus 请输入用户名:scott 请输入口令: sqlplus scott/ quit退出 管理员登录 sqlplus /nolog 连接数据库 ...

  3. 理解Storm并发

    作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 注:本文主要内容翻译自understanding-the-parall ...

  4. MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记

    MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记 说明 以root账户登录Linux操作系统,注意:本文中的所有命令行前面的 #> 表示命令行提示符 ...

  5. CentOS7 安装Mono及Jexus

    CentOS7安装Mono及Juxes 1 安装Mono 1.1 安装yum-utils 因为安装要用到yum-config-manager,默认是没有安装的,所以要先安装yum-utils包.命令如 ...

  6. ES6+ 现在就用系列（二)：let 命令

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

  7. CanvasWebgl项目介绍

    CanvasWebgl 介绍 CanvasWebgl 是一个基于webgl 开发的2d绘图框架,使用TypeScript开发   CanvasWebgl的功能,是在屏幕空间 或者 3D空间产生一个画布 ...

  8. ABP源码分析十三：缓存Cache实现

    ABP中有两种cache的实现方式:MemroyCache 和 RedisCache. 如下图,两者都继承至ICache接口(准确说是CacheBase抽象类).ABP核心模块封装了MemroyCac ...

  9. Javascript之函数模型

    分析: 对于js自定义函数,函数体的内容大致可抽象为:变量(局部变量,由var关键字定义,全局变量)和函数(一般函数,匿名函数,闭包函数). function SelfDefineFunc() { v ...

  10. ThinkPhp5.0模型验证规则

    Tp5提供了模型数据规则的验证功能,用于在数据save或者update前验证数据的有效性.Tp5提供校验规则的类为\Think\Validate,默认提供的校验规则可以查看该文件. 在Model文件中 ...