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 + /会出现 ...
随机推荐
- 开源：Taurus.MVC 框架
为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...
- iOS开发系列--Swift语言
概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...
- [C#] 软硬结合第二篇——酷我音乐盒的逆天玩法
1.灵感来源: LZ是纯宅男,一天从早上8:00起一直要呆在电脑旁到晚上12:00左右吧~平时也没人来闲聊几句,刷空间暑假也没啥动态,听音乐吧...~有些确实不好听,于是就不得不打断手头的工作去点击下 ...
- Git命令总结
本文转载自345大神.... 查看原文 先上个图形化界面GIT工具 SourceTree下载链接 windows版 1.8.3 & Mac版 2.2.4 链接: http://pan.baid ...
- [C#] 简单的 Helper 封装 -- CookieHelper
using System; using System.Web; namespace ConsoleApplication5 { /// <summary> /// Cookie 助手 // ...
- iOS:以前笔记，未整理版。太多了，先放着吧。。。。。。。
1. -(void)timetick { _d = 0; NSTimer *newtime =[NSTimer scheduledTimerWithTimeInterval:1 target:self ...
- 【转】Android开发中让你省时省力的方法、类、接口
转载 http://www.toutiao.com/i6362292864885457410/?tt_from=mobile_qq&utm_campaign=client_share& ...
- Xamarin.Android之SQLiteOpenHelper
一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...
- Angular移除不必要的$watch之性能优化
双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...
- Fedora 24中的日志管理
Introduction Log files are files that contain messages about the system, including the kernel, servi ...