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>
js自动提示查询添加功能（不是自动补全）的更多相关文章
- 1.使用Vue.js实现品牌案例添加功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android studio3.1的XML布局文件没有自动提示不全代码功能
将studio从2.3升级到3.1,打开后发现布局文件没有代码提示 尝试了网上一些解决方法,但发现并不是平时所说的省电模式开关的问题,也尝试了删除idea和iml文件后rebuild的方法,无效 然后 ...
- JS输入框邮箱自动提示(带有demo和源码)（转载）
今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...
- JS输入框邮箱自动提示(带有demo和源码)
今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...
- Jquery 搜索框自动提示
为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...
- Visual Studio Code 中实现 C++ 函数定义跳转和代码自动补全功能(25)
方法1: 1.1 安装插件 C++ Intellisense 名称: C++ Intellisense id: austin.code-gnu-global 说明: C/C++ Intellisens ...
- vim基础学习之自动补全功能
本章我们学习自动补全功能1.自动补全优先从当前的编辑区获得补全列表例如:我们写下如下内容 aaaaa aabbb aaab 当我们再次输入aa,然后我们按下Tab的时候,会弹出一个包含 aaaaa a ...
- MyEclipse自动提示
MyEclipse自动提示 Eclipse中默认是输入"."后出现自动提示,用于类成员的自动提示,可是有时候我们希望它能在我们输入类的. 首字母后就出现自动提示,可以节省大量的输入 ...
- Eclipse代码自动提示（内容辅助content assist）
Eclipse中默认是输入"."后出现自动提示,用于类成员的自动提示,可是有时候我们希望它能在我们输入类的首字母后就出现自动提示,可以节省大量的输入时间(虽然按alt + /会出现 ...
随机推荐
- 完美判断iframe是否加载完成
var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...
- 【Machine Learning】KNN算法虹膜图片识别
K-近邻算法虹膜图片识别实战 作者:白宁超 2017年1月3日18:26:33 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
- Java MyBatis 插入数据库返回主键
最近在搞一个电商系统中由于业务需求,需要在插入一条产品信息后返回产品Id,刚开始遇到一些坑,这里做下笔记,以防今后忘记. 类似下面这段代码一样获取插入后的主键 User user = new User ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- 来，给Entity Framework热热身
先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...
- ajax
常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...
- 【WCF】自定义错误处理（IErrorHandler接口的用法）
当被调用的服务操作发生异常时,可以直接把异常的原始内容传回给客户端.在WCF中,服务器传回客户端的异常,通常会使用 FaultException,该异常由这么几个东东组成: 1.Action:在服务调 ...
- 算法与数据结构(八) AOV网的关键路径
上篇博客我们介绍了AOV网的拓扑序列,请参考<数据结构(七) AOV网的拓扑排序(Swift面向对象版)>.拓扑序列中包括项目的每个结点,沿着拓扑序列将项目进行下去是肯定可以将项目完成的, ...
- 香蕉云APP，2016下半年开发日记
2016-6-17 数据库设计不应该过多依赖范式,适度的冗余可以加快搜索速度,在服务器的配置还可以的情况下,可以采用冗余来解决查找慢的问题.还一个是要选择好数据库引擎,例如 InnoDB 和 myi ...
- 【NLP】干货！Python NLTK结合stanford NLP工具包进行文本处理
干货!详述Python NLTK下如何使用stanford NLP工具包 作者:白宁超 2016年11月6日19:28:43 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的 ...