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

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

　　用到的方法为：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. 图解Spark API

    初识spark,需要对其API有熟悉的了解才能方便开发上层应用.本文用图形的方式直观表达相关API的工作特点,并提供了解新的API接口使用的方法.例子代码全部使用python实现. 1. 数据源准备 ...

  2. NYOJ 998

    这道题是欧拉函数的使用,这里简要介绍下欧拉函数. 欧拉函数定义为:对于正整数n,欧拉函数是指不超过n且与n互质的正整数的个数. 欧拉函数的性质:1.设n = p1a1p2a2p3a3p4a4...pk ...

  3. 【腾讯Bugly干货分享】移动App入侵与逆向破解技术－iOS篇

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e0acc896e9ebb6865f321 如果您有耐心看完这篇文章,您将懂 ...

  4. 透过浏览器看HTTP缓存

    作为前端开发人员,对于我们的站点或应用的缓存机制我们能做的似乎不多,但这些却是与我们关注的性能息息相关的部分,站点没有做任何缓存机制,我们的页面可能会因为资源的下载和渲染变得很慢,但大家都知道去找前端 ...

  5. PE Checksum Algorithm的较简实现

    这篇BLOG是我很早以前写的,因为现在搬移到CNBLOGS了,经过整理后重新发出来. 工作之前的几年一直都在搞计算机安全/病毒相关的东西(纯学习,不作恶),其中PE文件格式是必须知识.有些PE文件,比 ...

  6. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  7. 2000条你应知的WPF小姿势 基础篇<8-14>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  8. WinForm中显示PDF文件

    一.VS2013中,菜单-工具-选择工具箱项-COM组件-勾选“Adobe PDF Reader”-确定 二.在工具箱中就可以看到Adobe PDF Reader控件了,拖到窗体上. 拖到窗体上之后, ...

  9. 关于js中的this之判断this

    this绑定规则的优先级顺序 new操作符绑定 > 显示绑定 > 隐式绑定 > 默认绑定   所以在判断函数在某个调用位置应用的是哪条规则,可以按下列这样的顺序   if(函数在ne ...

  10. 如何优雅地使用Sublime Text

    Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于难于上手的Vim,浮肿沉重的Eclip ...