这次的重点就在于一个兼容性的问题。就是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. Jqueryの锋利的jquery练习

    $(function(){ $("div.SubCategoryBox li:gt(7):not(:last)").hide(); $("div.SubCategoryB ...

  2. java 网络编程（一）---基础知识和概念了解

    java 为用户提供了十分完善的网络功能: 1. 获取网络上的各种资源(URL) 2. 与服务器建立连接和通信(ServerSocket和Socket) 3. 无连接传递本地数据(DatagramSo ...

  3. android 应用架构随笔五（ActionBar与侧滑菜单DrawerLayout）

    ActionBar(V7)的添加非常简单,只需要在AndroidManifest.xml中指定Application或Activity的theme是Theme.Holo或其子类就可以了,在Androi ...

  4. jQuery的Ajax的跨域请求

    今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目 ...

  5. 【JQGRID DOCUMENTATION】.学习笔记.1.安装jqGrid

    前面介绍了怎么使用其MVC方式,很好用.不过,觉得还是只使用前段比较好. 1.1 如何安装 到http://www.trirand.com/blog/?page_id=6 下载. </html& ...

  6. 检测内存泄露:Instruments中的Leaks

    前言 如果要检测内存泄露,我们会使用Xcode7自带的Instruments中的Leaks工具来检测. 现在的开发环境是ARC,所以很少会出现内存泄漏的情况. 不过我们一定要养好码代码的规范性. 例如 ...

  7. mongo 日记

    分组代码片段 命令行代码: aggregate({$group:{_id:{A:'$A',B:'$B',C:'$C'}}}) 拿出唯一号有重复的数据: > db.aaaa.aggregate([ ...

  8. Linux用户组与用户组基本命令

    1.添加用户组:groupadd sexy2.修改组名:groupmod -n market sexy3.修改组编号:groupmod -g 668 market4.添加有编号的用户组:group - ...

  9. DedeCMS模板文件不存在,无法解析文档! 问题定位方法

    生成静态的时候,经常会遇到“模板文件不存在,无法解析文 档!”的问题.很多朋友试过论坛里很多方法,都是针对某些人可以解决,某些人的问题依旧,为什么呢?其实问题很可能确实是多种多样的,表现结果却是一样, ...

  10. android 动画总结

    以下博文讲解比较详细,可查阅: http://www.360doc.com/content/13/0102/22/6541311_257754535.shtml 几个关键属性: setRepeatCo ...