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 + /会出现 ...
随机推荐
- 基于spring注解AOP的异常处理
一.前言 项目刚刚开发的时候,并没有做好充足的准备.开发到一定程度的时候才会想到还有一些问题没有解决.就比如今天我要说的一个问题:异常的处理.写程序的时候一般都会通过try...catch...fin ...
- 如何一步一步用DDD设计一个电商网站（三）—— 初涉核心域
一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...
- C语言 · 数位分离
问题描述 编写一个程序,输入一个1000 以内的正整数,然后把这个整数的每一位数字都分离出来,并逐一地显示. 输入格式:输入只有一行,即一个1000以内的正整数. 输出格式:输出只有一行,即该整数的每 ...
- (JS+CSS)实现图片放大效果
代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...
- WPF 微信 MVVM
公司的同事离职了,接下来的日子可能会忙碌,能完善DEMO的时间也会少了,因此,把做的简易DEMO整体先记录一下,等后续不断的完善. 参考两位大神的日志:WEB版微信协议部分功能分析.[完全开源]微信客 ...
- iOS的ATS配置 - 2017年前ATS规定的适配
苹果规定 从2017年1月1日起,新提交的 app 不允许使用NSAllowsArbitraryLoads来绕过ATS(全称:App Transport Security)的限制. 以前为了能兼容ht ...
- JavaScript正则表达式，你真的知道？
一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- Mybatis XML配置
Mybatis常用带有禁用缓存的XML配置 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...
- 代码的坏味道（21）——中间人(Middle Man)
坏味道--中间人(Middle Man) 特征 如果一个类的作用仅仅是指向另一个类的委托,为什么要存在呢? 问题原因 对象的基本特征之一就是封装:对外部世界隐藏其内部细节.封装往往伴随委托.但是人们可 ...