一个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. ...

随机推荐

【pyQuery】抓取startup news首页
#! /usr/bin/python # coding: utf-8 from pyquery import PyQuery c=PyQuery('http://news.dbanotes.net/' ...
源码安装apache
目标:源码安装apache 依赖包:apr.apr-util和pcre.其中pcre正则库要先安装,apr和apr-util(已解压)可以复制到apache下的资源库srclib下. 安装pcre: ...
【python cookbook】【数据结构与算法】7.让字典保持有序
问题:创建一个字典,同时对字典做迭代或序列化操作时,也能控制其中元素的顺序: 解决方案:可以使用collections模块中的OrderedDict类来控制字典中元素的顺序.当对字典做迭代时,他会严格 ...
flexbox in IE (10+ and 9 and 8)
.parent { display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !impor ...
shell获取目录下最新的文件，文件是以日期命名
如果你为每个文件按日期命名的格式都一致的话,那么 "ls -l" 命令列出的文件列表就是默认按文件名称(日期先后)排序的.那么最后一个就是最新的,文件名可以用以下方式获取.file ...
Nagios监控Oralce
一.本文说明: 本文是监控本地的Oracle,其实监控远端的Oracle也是跟下面的步骤差不多的. 二.安装Nagios.Nagios插件.NRPE软件: 安装步骤可以参考<Linux下Nagi ...
如何在ecshop商品详情页显示供货商信息
以下范例以ecshop2.7.2原型做为修改: 1.首先需要修改程序文件,将供货商读取出来,然后赋值给模板, 打开文件 /goos.php, 在 $smar ...
shell基础二十篇一些笔记
shell基础二十篇转自 http://bbs.chinaunix.net/thread-452942-1-1.html 研讨:Bash 内建命令 read (read命令更具体的说明见博客收藏的一 ...
java GUI画满天星
import java.awt.Color; import java.awt.Graphics; import java.awt.Image; import javax.swing.ImageIcon ...
Java四种线程池newCachedThreadPool,newFixedThreadPool,newScheduledThreadPool,newSingleThreadExecutor
1.new Thread的弊端执行一个异步任务你还只是如下new Thread吗? Java new Thread(new Runnable() { @Override public void ru ...

一个js搜索功能的实现

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

随机推荐

热门专题