这次的重点就在于一个兼容性的问题。就是innerText（微软ie）和textContent（火狐）的知识点，兼容性永远都是伤啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.join_list{ margin:10px;}

.join_title{ height:30px; line-height:30px; margin-bottom:4px; padding:0 10px; background:#f3f3f3; text-indent:2em; font-size:14px; cursor:pointer;}

.join_title b{ background:#FC3; font-weight:normal;}

.join_title span{ float:right; color:#707070; font:bold 18px/30px Arial;}

.join_detail{ display:none; padding:5px 0 10px 30px; word-wrap:break-word;overflow:hidden;}

.join_detail ul li {list-style: disc inside none;}

.join_detail ol li {list-style: decimal inside none;}

.join_detail{ line-height:24px;}

.form{ background:#cde6fe; padding:3px; float:left; position:relative; left:50%; margin:20px 0 20px -240px; overflow:hidden}

input{ width:400px; height:20px; padding:5px; font-size:14px; float:left;}

button{ height:32px; float:left; padding:0 15px; background:#009AE2; border:none; color:#fff;}

</style>

</head>

<body>

<div class="form">

<input type="text" placeholder="请输入学校名称" />

</div>

<br clear="all" />

<div class="join_list" id="join_list">

<div class="join_title"><span class="join_mark">+</span>你我她</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>是你我他</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>一个兵</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>我是一</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>个兵</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>兵兵</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>我兵</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>是一个兵</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>个兵</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

<div class="join_title"><span class="join_mark">+</span>一个兵</div>

<div class="join_detail">

我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵我是一个兵

</div>

</div>

</body>

</html>

<script type="text/javascript">

    document.getElementsByTagName("input")[0].focus();

    var oId=document.getElementById("join_list");

    var aLi=getbyclass("join_title",oId);

document.onkeyup=function(e){

        var str=document.getElementsByTagName("input")[0].value;

        if(str.length>0){

        var re=new RegExp(str,'g');

        for(var i=0;i<aLi.length;i++){

            var t=aLi[i].innerText||aLi[i].textContent;

            if(aLi[i].childNodes.nodeType==3){

            }

            if(re.test(t)){

                aLi[i].style.display="block";

                aLi[i].innerHTML=t.replace(re,"<b>"+str+"</b>");

            }else{

                aLi[i].style.display="none";

            }

        }

        }

    if(document.activeElement.type=='text'){

        if(str.length==0){

        location.reload(false);

        }

    }

}

function getbyclass(oClass,Oparent){

    var oParent=oParent||document;

    if(Oparent.getElementsByClassName){

        return Oparent.getElementsByClassName(oClass)

    }else{

        var re=[];

        var reg=new RegExp("\\b"+oClass+"\\b")

        var ch=oParent.getElementsByTagName("div");

        for(var i=0;i<ch.length;i++){

            var str=ch[i].className;

            if(reg.test(str)){

                re.push(ch[i]);

            }

        }

        return re;

    }

}

</script>

一个js搜索功能的实现的更多相关文章

  1. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  2. iOS--- UITableView + UISearchDisplayController - - - - -实现搜索功能

    iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...

  3. ios UISearchDisplayController 实现 UITableView 搜索功能

    UISearchDisplayController 是苹果专为 UITableView 搜索封装的一个类. 里面内置了一个 UITableView 用于显示搜索的结果.它可以和一个需要搜索功能的 co ...

  4. 高德地图搜索功能以及清除搜索结果maker

    第一次写文章,写得不好各位看官见谅~ (pσ_σ)P首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能和 ...

  5. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  6. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  7. PHP 结合 Boostrap 结合 js 实现学生列表删除编辑以及搜索功能（完结）

    这个自己的小项目要先告一段落了.可能还有许多bug.请见谅 删除学生功能 PHP: // 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一 ...

  8. js table的笔记，实现添加 td，实现搜索功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

随机推荐

  1. lower power的physical library

    在一个cell library中,比较重要的是cell height,cell height由tracks来决定,track表示一个metal线的pitch. 一个cell通常被做成一定数量的trac ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON CropPart

    zw版[转发·台湾nvp系列Delphi例程]HALCON CropPart procedure TForm1.Button1Click(Sender: TObject);var ho_Egypt1 ...

  3. 【py分析】

    pyQuery pyQuery 是 jQuery 在 python 中的实现,能够以 jQuery 的语法来操作解析 HTML 文档,十分方便.使用前需要安装,easy_install pyquery ...

  4. dbo与db_owner区别

    dbo 是具有在数据库中执行所有活动的暗示性权限的用户.将固定服务器角色 sysadmin 的任何成员都映射到每个数据库内称为 dbo 的一个特殊用户上.另外,由固定服务器角色 sysadmin 的任 ...

  5. ASP.NET MVC4中的bundles特性引发服务器拒绝访问（403错误）

    在ASP.NET MVC4中微软引入了bundles特性,这个特性可以将服务器端的多个Javascript或多个css文件捆绑在一起作为一个单一的URL地址供客户端浏览器调用,从而减少了页面上Http ...

  6. 【Ah20160703】咏叹 By C_SUNSHINE

    咏叹 By C_SUNSHINE [试题描述] Salroey拿到了一个1~n的排列A,她想对这个排列进行冒泡排序: counter=0 While A不是升序的 counter=counter+1 ...

  7. C#抽象类及其方法的学习【转】

    转至 http://www.cnblogs.com/flyinthesky/archive/2008/06/18/1224774.html 在C#中使用关键字 abstract 来定义抽象类和抽象方法 ...

  8. java中的反射机制，以及如何通过反射获取一个类的构造方法 ，成员变量，方法，详细。。

    首先先说一下类的加载,流程.只有明确了类这个对象的存在才可以更好的理解反射的原因,以及反射的机制. 一.  类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三 ...

  9. Python升级Yum不能使用解决

    1.系统版本 [root@vm10-254-206-95 ~]# cat /etc/issue CentOS release 6.4 (Final) Kernel \r on an \m 2.系统默认 ...

  10. ecshop后台增加栏目查询会员是否重复注册

    ecshop的后台要查询哪些会员是否有重复注册时,可以利用特定的栏目来判断~ 譬如会员电话... 修改前请务必先备份下列档案!!! admin/users.php admin/templates/us ...