模拟搜索需要实现以下功能：

　　1、用户的模糊搜索不区分大小写，需要小写字母匹配同样可以匹配到该字母的大写单词。

　　2、多关键词模糊搜索，假设用户关键词以空格分隔，在关键词不完整的情况下仍然可以匹配到包含该关键字的表格。

　　3、表格筛选，符合条件的表格展现，不符合条件的表格隐藏。

<!doctype html>

<html>

<head>

<title>表格搜索</title>

<meta charset="utf-8">

<style>

html{font-family:楷体;}

</style>

</head>

<body>

姓名：<input id='name' type='text'/>

<input id='btn1' type='button' value='搜索'/>

<table id='tab1'  border="1" width="500" >

    <thead>

        <tr><td>ID</td><td>姓名</td><td>年龄</td></tr>

    </thead>

    <tbody>

        <tr><td>1</td><td>阿童木</td><td>30</td></tr>

        <tr><td>2</td><td>机器猫</td><td>44</td></tr>

        <tr><td>3</td><td>小叮当</td><td>53</td></tr>

        <tr><td>4</td><td>海雅</td><td>69</td></tr>

        <tr><td>5</td><td>祖鲁</td><td>27</td></tr>

        <tr><td>6</td><td>JavaScript权威指南</td><td>28</td></tr>

    </tbody>

</table>

</body>

</html>

　　【1、用户的模糊搜索不区分大小写，需要小写字母匹配同样可以匹配到该字母的大写单词。】思路：由于JS区分大小写，需要将用户输入值与表格中的innerHTML值均转换为小写形式，再进行匹配，实现模糊匹配效果。函数toLowerCase()把字符串转换为小写。

　　JavaScript代码：

window.onload=function()

{

    var oTab=document.getElementById('tab1');

    var oTxt=document.getElementById('name');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function()

    {

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            oTab.tBodies[0].rows[i].style.display='none';

            if(oTxt.value.toLowerCase()==oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase())

            {

                oTab.tBodies[0].rows[i].style.display='block';

            }

        }

    }

};

　　【2、多关键词模糊搜索，假设用户关键词以空格分隔，在关键词不完整的情况下仍然可以匹配到包含该关键字的表格。】思路：搜索词通过split()函数进行分割，每个切割的单元search()函数检测是否在表格单元的字符串值中存在。

window.onload=function()

{

    var oTab=document.getElementById('tab1');

    var oTxt=document.getElementById('name');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function()

    {

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            oTab.tBodies[0].rows[i].style.display='none';

            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

            var sTxt=oTxt.value.toLowerCase();

            var arr=sTxt.split(' ');

            for(var j=0;j<arr.length;j++)

            {

                if(sTab.search(arr[j])!==-1)

                {

                   oTab.tBodies[0].rows[i].style.display='block';

                }

            }

        }

    }

};

　　错误的JavaScript代码

 oBtn.onclick=function()

    {

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            oTab.tBodies[0].rows[i].style.display='none';

            var sTxt=oTxt.value.toLowerCase().split(' ');

            if(oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().search(sTxt)!==-1)

            {

                oTab.tBodies[0].rows[i].style.display='block';

            }

        }

　　(a)split()函数切割获得由一连串字符串组成的数组。search()函数内的参数为需要检索的字符串。(b)for循环内嵌套for循环时，若嵌套的for循环中包含两个循环参数，需要注意嵌套的循环若定义变量与外部循环相同可能导致的逻辑问题。

JavaScript在表格中模拟搜索多关键词搜索和筛选的更多相关文章

  1. JavaScript向表格中添加按钮和文本输入框

    例子: <?php ?> <html> <head> <meta http-equiv="Content-Type" content=&q ...

  2. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  3. 【高德地图API】从零開始学高德JS API（四）搜索服务——POI搜索|自己主动完毕|输入提示|行政区域|交叉路口|自有数据检索

    地图服务.大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.假设说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血. 有个各种各样 ...

  4. 获取百度地图POI数据三（模拟关键词搜索）

    上一篇博文中讲到如何获取用于搜索的关键词,并且已经准备好了一百五十万的关键词   这其中有门牌号码,餐馆酒店名称,公司名称,道路名称等.有了这些数据,我们就可以通过代码,模拟我们在百度地图的搜索框中搜 ...

  5. 在C#中模拟Javascript的setTimeout方法

    在C#中模拟Javascript的setTimeout方法 背景 每种语言都有自己的定时器(Timer),很多人熟悉Javascript中的setInterval和setTimeout,在Javasc ...

  6. UWP 在 WebView 中执行 JavaScript 代码（用于模拟用户输入等）

    UWP 中使用 WebView 时可以在网页中额外执行一些代码.于是你几乎可以在网页上做任何事情,那些你可以在浏览器控制台中做的事情. 本文将介绍做法. 本文内容 准备环境 执行 JavaScript ...

  7. UWP 在 WebView 中执行 JavaScript 代码（用于模拟用户输入等） - walterlv

    原文:UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) - walterlv UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) ...

  8. JavaScript读取剪贴板中的表格生成图片

    原文 JavaScript读取剪贴板中的表格生成图片 演示地址 你可以访问下面的地址体验每个demo https://fairyever.github.io/excel-to-image-demo/ ...

  9. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

随机推荐

  1. R语言数据重塑

    使用cbind()函数连接多个向量来创建数据帧.此外,使用rbind()函数合并两个数据帧   使用merge()函数合并两个数据帧.数据帧必须具有相同的列名称,在其上进行合并   melt()拆分数 ...

  2. Swift 3到5.1新特性整理

    本文转载自:https://hicc.me/whats-new-in-swift-3-to-5-1/,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有. Hipo 2.0 重写从 Swif ...

  3. for循环中索引值和取值的迷惑

    利用for循环和range从100——10,倒序讲所有的偶数添加到一个新列表中,然后对列表的元素进行筛选,将能被4整除的数留下来. even = []for i in range(100,9,-1): ...

  4. PHP基础库及扩展库安装

    一.安装PHP所需的lib库(基础库): 1.yum install zlib-devel libxml2-devel libjpey-devel libjpeg-turbo-devel libico ...

  5. （转载）python应用svm算法过程

    除了在Matlab中使用PRTools工具箱中的svm算法,Python中一样可以使用支持向量机做分类.因为Python中的sklearn库也集成了SVM算法,本文的运行环境是Pycharm. 一.导 ...

  6. noip模拟赛 站军姿

    分析:纯数学题.相离和包含关系的可以很容易算出来答案,相交的话要先求出两个圆的面积,然后减掉中间重叠的部分,这一部分并不能直接求出来,但是可以求出两个扇形的面积,和它们围成的一个四边形的面积,加加减减 ...

  7. vs2005添加include lib文件目录

    vs2005添加include lib文件目录 http://blog.sina.com.cn/s/blog_79489160010145wb.html 1. 添加编译所需要的 lib 文件 [解决方 ...

  8. 洛谷—— P1077 摆花

    https://www.luogu.org/problem/show?pid=1077 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客 ...

  9. 洛谷—— P1092 虫食算

    https://www.luogu.org/problem/show?pid=1092 题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简 ...

  10. HDU 5016 Mart Master II (树上点分治)

    题目地址:pid=5016">HDU 5016 先两遍DFS预处理出每一个点距近期的基站的距离与基站的编号. 然后找重心.求出每一个点距重心的距离.然后依据dis[x]+dis[y] ...