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 + /会出现 ...
随机推荐
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 关于 Chrome 浏览器中 onresize 事件的 Bug
我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...
- C# 注册 Windows 热键
闲扯: 前几日,一个朋友问我如何实现按 F1 键实现粘贴(Ctrl+V)功能,百度了一个方法,发给他,他看不懂(已经是 Boss 的曾经的码农),我就做了个Demo给他参考.今日得空,将 Demo 整 ...
- 采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延伸系列2)
前言 Entity Framework 延伸系列目录 今天我们来讲讲EntityFramework.Extended 首先科普一下这个EntityFramework.Extended是什么,如下: 这 ...
- win7安装时，避免产生100m系统保留分区的办法
在通过光盘或者U盘安装Win7操作系统时,在对新硬盘进行分区时,会自动产生100m的系统保留分区.对于有洁癖的人来说,这个不可见又删不掉的分区是个苦恼.下面介绍通过diskpart消灭保留分区的办法: ...
- SQLServer事务同步下如何收缩日志
事务同步是SQLServer做读写分离的一种常用的方式. 随着业务数据的不断增长,数据库积攒了大量的日志,为了腾出硬盘空间,需要对数据库日志进行清理 订阅数据库的日志清理 因为订阅数据库所有的数据都来 ...
- Spring之旅
Java使得以模块化构建复杂应用系统成为可能,它为Applet而来,但为组件化而留. Spring是一个开源的框架,最早由Rod Johnson创建.Spring是为了解决企业级应用开发的复杂性而创建 ...
- android 使用Tabhost 发生could not create tab content because could not find view with id 错误
使用Tabhost的时候经常报:could not create tab content because could not find view with id 错误. 总结一下发生错误的原因,一般的 ...
- 使用HttpClient的优解
新工作入职不满半周,目前仍然还在交接工作,适应环境当中,笔者不得不说看别人的源码实在是令人痛苦.所幸今天终于将大部分工作流畅地看了一遍,接下来就是熟悉框架技术的阶段了. 也正是在看源码的过程当中,有一 ...
- BPM配置故事之案例10-获取外部数据
老李:Hi,小明,我又来了 小明:--这次又怎么了. 老李:之前的物资管理方式太混乱了,这段时间我整理了采购物资清单,现在都录入到我们的ERP中了,以后申请物资改成从ERP数据选择吧.物资明细表我也做 ...