一个js搜索功能的实现

这次的重点就在于一个兼容性的问题。就是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搜索功能的实现的更多相关文章

原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...
iOS--- UITableView + UISearchDisplayController - - - - -实现搜索功能
iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...
ios UISearchDisplayController 实现 UITableView 搜索功能
UISearchDisplayController 是苹果专为 UITableView 搜索封装的一个类. 里面内置了一个 UITableView 用于显示搜索的结果.它可以和一个需要搜索功能的 co ...
高德地图搜索功能以及清除搜索结果maker
第一次写文章,写得不好各位看官见谅~ (pσ_σ)P首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能和 ...
CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块最近在有优化公司后台的某个模块的搜索功能优化原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子是不是比以前好 ...
JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑以及搜索功能（完结）
这个自己的小项目要先告一段落了.可能还有许多bug.请见谅删除学生功能 PHP: // 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一 ...
js table的笔记，实现添加 td，实现搜索功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

随机推荐

响应式框架pure--来自雅虎
梦想还是要有 http://www.purecss.org/
python 笔记1
Python join()方法描述 Python join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串. 语法 join()方法语法: str.join(sequence) 参数 ...
zw版【转发·台湾nvp系列Delphi例程】HALCON FillUp1
zw版[转发·台湾nvp系列Delphi例程]HALCON FillUp1 procedure TForm1.Button1Click(Sender: TObject);var img : HImag ...
Job类
当我们在写MapReduce程序的时候,通常,在main函数里,我们会像下面这样做.建立一个Job对象,设置它的JobName,然后配置输入输出路径,设置我们的Mapper类和Reducer类,设置I ...
集成Spring事物管理
什么是事物事物是访问数据库的一个操作序列,数据库应用系统通过事物集来完成对数据库的存取.事物的正确执行使得数据库从一种状态转换为另一种状态. 事物必须服从ISO/IEC所制定的ACID原则.ACID ...
java基础整理1
1.匿名对象:new persion().tell();这样的,它只开辟栈内存,没有栈引用的关系 2.构造方法的名称必须与类名称一致,构造方法的声明处不能有任何返回值类型的声明,不能在构造方法中使用r ...
搬瓦工的ShadowSock设置方法:
sql回滚
rollback是针对事务的,你如果没有在执行语句之前开启事务,那么无法rollback,建议你还是想别的办法吧,事务语句如下(sqlserver的给你借鉴):--开启事务begin tran --执 ...
Spring的javaMail邮件发送(带附件)
项目中经常用到邮件功能,在这里简单的做一下笔记,方便日后温习. 首先需要在配置文件jdbc.properties添加: #------------ Mail ------------ mail.smt ...
Linux I2C工具查看配置I2C设备【转】
转自:http://blog.chinaunix.net/uid-26895763-id-3478882.html 在處理音訊相關的問題時,我通常會找個方法來讀寫codec中register的值.幸好 ...

一个js搜索功能的实现

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

随机推荐

热门专题