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

优点：

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>

js自动提示查询添加功能（不是自动补全）的更多相关文章

  1. 1.使用Vue.js实现品牌案例添加功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android studio3.1的XML布局文件没有自动提示不全代码功能

    将studio从2.3升级到3.1,打开后发现布局文件没有代码提示 尝试了网上一些解决方法,但发现并不是平时所说的省电模式开关的问题,也尝试了删除idea和iml文件后rebuild的方法,无效 然后 ...

  3. JS输入框邮箱自动提示(带有demo和源码)（转载）

    今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...

  4. JS输入框邮箱自动提示(带有demo和源码)

    今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...

  5. Jquery 搜索框自动提示

    为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...

  6. Visual Studio Code 中实现 C++ 函数定义跳转和代码自动补全功能(25)

    方法1: 1.1 安装插件 C++ Intellisense 名称: C++ Intellisense id: austin.code-gnu-global 说明: C/C++ Intellisens ...

  7. vim基础学习之自动补全功能

    本章我们学习自动补全功能1.自动补全优先从当前的编辑区获得补全列表例如:我们写下如下内容 aaaaa aabbb aaab 当我们再次输入aa,然后我们按下Tab的时候,会弹出一个包含 aaaaa a ...

  8. MyEclipse自动提示

    MyEclipse自动提示 Eclipse中默认是输入"."后出现自动提示,用于类成员的自动提示,可是有时候我们希望它能在我们输入类的. 首字母后就出现自动提示,可以节省大量的输入 ...

  9. Eclipse代码自动提示（内容辅助content assist）

    Eclipse中默认是输入"."后出现自动提示,用于类成员的自动提示,可是有时候我们希望它能在我们输入类的首字母后就出现自动提示,可以节省大量的输入时间(虽然按alt + /会出现 ...

随机推荐

  1. .net点选验证码实现思路分享

    哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...

  2. ABP文档 - 导航

    文档目录 本节内容: 创建菜单 注册导航供应器 显示菜单 每个web应用都有一些菜单用来在页面/屏幕之间导航,ABP提供了一个通用的基础框架创建并显示菜单给用户. 创建菜单 一个应用可能由不同模块组成 ...

  3. Adaboost提升算法从原理到实践

    1.基本思想: 综合某些专家的判断,往往要比一个专家单独的判断要好.在"强可学习"和"弱科学习"的概念上来说就是我们通过对多个弱可学习的算法进行"组合 ...

  4. [原] KVM 虚拟化原理探究 —— 目录

    KVM 虚拟化原理探究 -- 目录 标签(空格分隔): KVM KVM 虚拟化原理探究(1)- overview KVM 虚拟化原理探究(2)- QEMU启动过程 KVM 虚拟化原理探究(3)- CP ...

  5. [笔记]HAproxy reload config file with uninterrupt session

    HAProxy is a high performance load balancer. It is very light-weight, and free, making it a great op ...

  6. Android之使用文件进行IPC

    一.文件进行IPC介绍 共享文件也是一种不错的进程间通信方式,两个进程通过读/写同一个文件来交换数据.在Windows上,一个文件如果被加了排斥锁将会导致其他线程无法对其进行访问,包括读写,而由于An ...

  7. MongoDB学习笔记五—查询上

    数据准备 { , "goods_name" : "KD876", "createTime" : ISODate("2016-12- ...

  8. FineReport:关于扩展行列求各种条件下的函数运用

    最简单的扩展列,扩展行的求"最大,最小,平均"值的例子 设计图 效果图 相关函数 =MAX(B2:E2) =MIN(B2:E2) =AVERAGE(B2:E2) 这个是(满足条件) ...

  9. SQL SERVER全面优化-------Expert for SQL Server 诊断系列

    现在很多用户被数据库的慢的问题所困扰,又苦于花钱请一个专业的DBA成本太高.软件维护人员对数据库的了解又不是那么深入,所以导致问题迟迟不能解决,或只能暂时解决不能得到根治.开发人员解决数据问题基本又是 ...

  10. 《深入理解Java虚拟机》调优案例分析与实战

    上节学习回顾 在上一节当中,主要学习了Sun JDK的一些命令行和可视化性能监控工具的具体使用,但性能分析的重点还是在解决问题的思路上面,没有好的思路,再好的工具也无补于事. 本节学习重点 在书本上本 ...