js—模糊查询

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

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

　　用到的方法为：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>

相关文章