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

随机推荐

夺命雷公狗---node.js---22之项目的构建在node+express+mongo的博客项目7之数据的修改
在修改的时候和在PHP里面修改的一样,都是需要在列表页传个id过来才可以实现修改的,如下所示: 然后在后端接收到他传过来id的同时去读取该id的所有信息: 然后就开始写post处理数据方面的问题了,如 ...
夺命雷公狗---Thinkphp----9之中间层的创建，防止跨目录访问
我们创建一个CommonController.class.php的中间层,让后让别的控制器都直接继承CommonController这个控制器即可决解跨目录访问的问题, <?php namesp ...
PAT乙级 1019. 数字黑洞 (20)
1019. 数字黑洞 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定任一个各位数字不完全相同的4位 ...
SQL——存储过程
1. 为什么使用存储过程应用程序通过T-SQL语句到服务器的过程是不安全的. 1) 数据不安全 2)每次提交SQL代码都要经过语法编译后在执行,影响应用程序的运行性能 3) 网络流量大 2. 什么是 ...
项目中empty遇到的一个问题
搜索传参时,数据能获取到,搜索结果不是根据参数得出的,在定义搜索条件时因为empty引起的一个问题,键为0的值没有获取到, 记住:!empty 已经把0排除了
ubuntu下配置SVN服务器
自己买的阿里云服务器.可是我老感觉没有SVN上传代码下载代码太不方便!决定配置个SVN服务器! 1.安装Subversion $ sudo apt-get install subversion $ s ...
viewpage图片轮播
package com.exmple.viewpage2; import java.util.ArrayList;import java.util.List;import java.util.Time ...
160927、用jquery 重置表单的方法
清空我们项目小小部分的搜索条件: 客户要做的是,只要一键 "清空搜索条件" 即可清空维护地点.订单ID等条件. js函数 //重置表单 function resetform(){ ...
android 常用命令
1.查看当前手机界面的 Activity dumpsys | grep "mFocusedActivity" 查看任务栈 dumpsys | grep "Hist&q ...
sql 语法
CASE ISNULL(b.enddate , '2000-1-1') WHEN '2000-1-1' THEN '未发稿' ELSE '已经发稿' END 如果时间为空,则显示为值‘200-1-1’ ...

一个js搜索功能的实现

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

随机推荐

热门专题