zoukankan      html  css  js  c++  java
  • js自动提示查询添加功能(不是自动补全)

    在工作中遇到查询某些数据,并添加到一个列表里的时候,写了一个小功能。

    优点:

    1.纯手工JS代码,不需要任何js框架,复制下来就能测试,无毒副作用。

    2.通过模糊查询快速定位数据,并添加到列表里。

    缺点:

    由于在实现过程中使用了全局的setInterval函数,有可能性能会下降。

    关于数据的获取可以用AJAX实时调用填充。

    本人抱着平和的心态接受任何大神小神提出关于性能和代码实现的改进意见~.~

    ----------------------------------------------不华丽的分割线,以下为源代码---------------------------------------------------------

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var isShow = true;
            var table, DataDiv, Txt, txtValue, rows, i;
            window.onload = function () {
                DataDiv = document.getElementById("DataDiv");
                Txt = document.getElementById("Txt");
                table = document.getElementById("tb-list");
                //100毫秒执行一次ShowData()
                self.setInterval("showData()", 100);
            }
            //显示数据
            function showData() {
                txtValue = Txt.value;
                //txt为空就隐藏DataDiv,并return方法
                if (txtValue == "") {
                    DataDiv.style.display = "none";
                    return;
                }
                DataDiv.style.display = "block";
                rows = table.getElementsByTagName("tr");
                for (i = 1; i < rows.length; i++) {
                    if (IsHave(rows[i].cells[1].innerHTML, txtValue) < 0) {
                        isShow = false;
                        if (IsHave(rows[i].cells[2].innerHTML, txtValue) < 0) {
                            isShow = false;
                            if (IsHave(rows[i].cells[3].innerHTML, txtValue) < 0) {
                                isShow = false;
                            }
                            else isShow = true;
    
                        }
                        else isShow = true;
    
                    }
                    else isShow = true;
    
                    if (isShow) {
                        rows[i].style.display = "";
                    }
                    else {
                        rows[i].style.display = "none";
                    }
                }
            }
            //判断某列中是否包含文本框中的关键字
            function IsHave(Str, subString) {
                if (subString == "") {
                    return 1;
                }
                else {
                    return Str.indexOf(subString);
                }
            }
            //添加到已选列表中
            function AddPeople(obj) {
                var i = obj.parentNode.parentNode.rowIndex;
                var currentrow = document.getElementById("tb-list").rows[i];
                var people = new Object();
                people.name = currentrow.cells[1].innerText;
                people.phone = currentrow.cells[2].innerText;
                people.address = currentrow.cells[3].innerText;
    
                var table = document.getElementById("selectedData");
                var rowcount = table.rows.length;
                var row = table.insertRow(rowcount);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
    
                cell1.innerHTML = people.name;
                cell2.innerHTML = people.phone;
                cell3.innerHTML = people.address;
                cell4.innerHTML = "<a href='#' onclick='DelTable(this)'>×</a>";
            }
            //删除已选列表里的某项
            function DelTable(obj) {
                var i = obj.parentNode.parentNode.rowIndex;
                var table = document.getElementById("selectedData");
                if (confirm("您是否确认删除此人!")) {
                    table.deleteRow(i);
                }
            }
        </script>
        <style type="text/css">
            *
            {
                font-size: 14px;
                margin: 0px;
                padding: 0px;
                font-family: 微软雅黑;
                border: none;
                outline: none;
                text-decoration: none;
            }
            #DataDiv
            {
                width: 500px;
                display: none;
                border-top: 1px solid #a5b6ca;
                border-left: 1px solid #a5b6ca;
                position: absolute;
                top: 40px;
                left: 5px;
                background-color: #ffffff;
            }
            
            #DataDiv1
            {
                width: 500px;
                border-top: 1px solid #a5b6ca;
                border-left: 1px solid #a5b6ca;
                margin: 5px;
                margin-top: 200px;
            }
            table
            {
                width: 100%;
            }
            table td
            {
                border-bottom: 1px solid #a5b6ca;
                border-right: 1px solid #a5b6ca;
            }
            #Txt
            {
                border: 1px solid #bbbbbb;
                height: 25px;
                border-radius: 4px;
                color: #414141;
                padding: 0px 7px 0px 7px;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <input id="Txt" type="text" />
        <div id="DataDiv">
            <table id="tb-list" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        序号
                    </td>
                    <td>
                        姓名
                    </td>
                    <td>
                        电话
                    </td>
                    <td>
                        住址
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        王西徽
                    </td>
                    <td>
                        18632085200
                    </td>
                    <td>
                        任县
                    </td>
                    <td>
                        <a href="javascript:;" onclick="AddPeople(this)">+</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        郭XX
                    </td>
                    <td>
                        18612345678
                    </td>
                    <td>
                        邢台市
                    </td>
                    <td>
                        <a href="javascript:;" onclick="AddPeople(this)">+</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        张XX
                    </td>
                    <td>
                        18666664444
                    </td>
                    <td>
                        石家庄市
                    </td>
                    <td>
                        <a href="javascript:;" onclick="AddPeople(this)">+</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        王XX
                    </td>
                    <td>
                        18633445566
                    </td>
                    <td>
                        石家庄市
                    </td>
                    <td>
                        <a href="javascript:;" onclick="AddPeople(this)">+</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>
                        赵XX
                    </td>
                    <td>
                        18611112222
                    </td>
                    <td>
                        邢台市
                    </td>
                    <td>
                        <a href="javascript:;" onclick="AddPeople(this)">+</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        6
                    </td>
                    <td>
                        李XX
                    </td>
                    <td>
                        18600002222
                    </td>
                    <td>
                        邢台市
                    </td>
                    <td>
                        <a href="javascript:;" onclick="AddPeople(this)">+</a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="DataDiv1">
            <table id="selectedData" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        姓名
                    </td>
                    <td>
                        电话
                    </td>
                    <td>
                        住址
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>
  • 相关阅读:
    bzoj-2748 2748: [HAOI2012]音量调节(dp)
    bzoj-2338 2338: [HNOI2011]数矩形(计算几何)
    bzoj-3444 3444: 最后的晚餐(组合数学)
    codeforces 709E E. Centroids(树形dp)
    codeforces 709D D. Recover the String(构造)
    codeforces 709C C. Letters Cyclic Shift(贪心)
    codeforces 709B B. Checkpoints(水题)
    codeforces 709A A. Juicer(水题)
    Repeat Number
    hdu 1003 Max Sum (动态规划)
  • 原文地址:https://www.cnblogs.com/luke1006/p/6247843.html
Copyright © 2011-2022 走看看