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

优点：

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. Python 小而美的函数

    python提供了一些有趣且实用的函数,如any all zip,这些函数能够大幅简化我们得代码,可以更优雅的处理可迭代的对象,同时使用的时候也得注意一些情况   any any(iterable) ...

  2. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  3. nohup程序后台执行

    Linux常用命令,用于不挂断的执行程序. nohup命令:如果你正在运行一个进程,而且你觉得在退出帐户时该进程还不会结束,那么可以使用nohup命令.该命令可以在你退出帐户/关闭终端之后继续运行相应 ...

  4. java Web项目创建之一（普通java web项目的创建与发布）

    1.创建新的web项目 file->new_>Dynamic Web Project(如图) 或file->new->Project->Web->Dynamic W ...

  5. 移动先行之谁主沉浮？ 带着你的Net飞奔吧！

    移动系源码:https://github.com/dunitian/Windows10 移动系文档:https://github.com/dunitian/LoTDotNet/tree/master/ ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（64）-补充WebApi与Unity注入-配置文件

    系列目录 上一篇演示了WebApi利用Unity注入 很多人问我如何用配置文件来配置注入,本节演示如何利用配置文件来注入,道理是一样的,跳转到上一节下载源码一起来动手! 1.打开源码定位到文件Depe ...

  7. [.NET] C# 知识回顾 - 委托 delegate （续）

    C# 知识回顾 - 委托 delegate (续) [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6046171.html 序 上篇<C# 知识回 ...

  8. html5的web存储

    在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...

  9. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  10. bzoj1584--DP

    题目大意:有N头奶牛,每头那牛都有一个标号Pi,1 <= Pi <= M <= N <= 40000.现在Farmer John要把这些奶牛分成若干段,定义每段的不河蟹度为:若 ...