首页新闻找找看学习计划

如何在静态的html里实现搜索功能?

0
悬赏园豆:50 [待解决问题]

如何在静态的html里实现搜索功能?静态的html

不抛弃的主页 不抛弃 | 初学一级 | 园豆:56
提问于:2013-01-23 16:59
< >
分享
所有回答(7)
0

搜索什么,搜索数据库中东西吗?

在静态页面使用ajax调用后台的操作搜索

hongdada | 园豆:216 (菜鸟二级) | 2013-01-23 17:43
0

楼主要搜索什么?

chenping2008 | 园豆:9836 (大侠五级) | 2013-01-23 21:27

在静态页面里搜索,比如,在静态页面里,有文章,然后在搜索栏里输入某个文字,然后查找文章里这个字,就是这个意思,可以用js实现的,但是不知道怎么去做。

支持(0) 反对(0) 不抛弃 | 园豆:56 (初学一级) | 2013-01-24 09:28

@不抛弃: 游览器自身提供的ctrl+f 就可以完成你的功能 ,还需要自己写JS?

支持(0) 反对(0) chenping2008 | 园豆:9836 (大侠五级) | 2013-01-24 10:42
0

利用js可以解决 原理 show和hide加+字符串处理 需要的话我明天上班可以提供案例

s_p | 园豆:269 (菜鸟二级) | 2013-01-23 21:35

在吗?我想就用js去解决,可不可以提供一个案列啊??

支持(0) 反对(0) 不抛弃 | 园豆:56 (初学一级) | 2013-01-24 09:27

@不抛弃: 

$("domID")
.hide() .filter(
":contains('" + $("domID").val() + "')")
.show();

$("domID").val() 就是你要输入的文本框的值 记得引用jq文件 

支持(0) 反对(0) s_p | 园豆:269 (菜鸟二级) | 2013-01-24 09:46
0

搜索什么东西?

az235 | 园豆:8263 (大侠五级) | 2013-01-24 08:55

在静态页面里搜索,比如,在静态页面里,有文章,然后在搜索栏里输入某个文字,然后查找文章里这个字,就是这个意思,可以用js实现的,但是不知道怎么去做。

支持(0) 反对(0) 不抛弃 | 园豆:56 (初学一级) | 2013-01-24 09:28

@不抛弃: 首先你要确定你的搜索域(搜索区域),然后提取文字jquery用.text()方法,js用innerText方法,简单点用indexOf确定文字

支持(0) 反对(0) az235 | 园豆:8263 (大侠五级) | 2013-01-24 12:55
0

好像上次有人问过 ,我推荐的是 

 

http://www.zhangxinxu.com/wordpress/2010/06/%E7%BA%AF%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%A1%B5%E9%9D%A2%E5%85%B3%E9%94%AE%E5%AD%97%E6%90%9C%E7%B4%A2%E9%AB%98%E4%BA%AEjquery%E6%8F%92%E4%BB%B6/

张坤 | 园豆:1865 (小虾三级) | 2013-01-24 11:05
0

输入搜索值:

123456789123456123456789qweqwwertyuiopasdfghjkklzxcvnm

<!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=gb2312" />
<title>无标题文档</title>
</head>

<body>
<input type="text" id="searchvalue"  /> <input type="button" onclick="javascript:search()"value="搜索" />
<div  cols="100" rows="10" id="textvalue" >123456789123456123456789qweqwwertyuiopasdfghjkklzxcvnm</div>

<script>

function search(){

var searchtext=document.getElementById("searchvalue").value;
var textvalue=document.getElementById("textvalue").innerHTML;
if(searchtext.length==0){
return;
}
document.getElementById("textvalue").innerHTML=textvalue.replaceAll(searchtext,"<font color='red'>"+searchtext+"</font>");
}

String.prototype.replaceAll = function(s1,s2){    
return this.replace(new RegExp(s1,"gm"),s2);    
}
</script>

</body>
</html>
vancegf | 园豆:234 (菜鸟二级) | 2013-01-24 15:36

 <form>
         <input type="text" class="txt" id="searchValue" value="请输入要搜索的关键词" />   
            <input type="button" class="btn" value="搜索" onclick="javascript:search()"/>
                     
        </form>        因为想要CSS效果,但放到form里却实现不了功能,这是为何

支持(0) 反对(0) 小皮哈人 | 园豆:200 (初学一级) | 2015-12-28 17:21
0

楼主,我给你js代码,不能发附件,就直接给你放这了,你要文件,联系我QQ,我发给你,553030761

 

// by zhangxixnu 2010-06-21  welcome to visit my personal website http://www.zhangxinxu.com/
// textSearch.js v1.0 文字,关键字的页面纯客户端搜索
// 2010-06-23 修复多字母检索标签破碎的问题
// 2010-06-29 修复页面注释显示的问题
// 不论何种情况,务必保留作者署名。


(function($){
    $.fn.textSearch = function(str,options){
        var defaults = {
            divFlag: true,
            divStr: " ",
            markClass: "",
            markColor: "red",
            nullReport: true,
            callback: function(){
                return false;    
            }
        };
        var sets = $.extend({}, defaults, options || {}), clStr;
        if(sets.markClass){
            clStr = "class='"+sets.markClass+"'";    
        }else{
            clStr = "style='color:"+sets.markColor+";'";
        }
        
        //对前一次高亮处理的文字还原
        $("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel");
        
        
        //字符串正则表达式关键字转化
        $.regTrim = function(s){
            var imp = /[\^\.\\\|\(\)\*\+\-\$\[\]\?]/g;
            var imp_c = {};
            imp_c["^"] = "\\^";
            imp_c["."] = "\\.";
            imp_c["\\"] = "\\\\";
            imp_c["|"] = "\\|";
            imp_c["("] = "\\(";
            imp_c[")"] = "\\)";
            imp_c["*"] = "\\*";
            imp_c["+"] = "\\+";
            imp_c["-"] = "\\-";
            imp_c["$"] = "\$";
            imp_c["["] = "\\[";
            imp_c["]"] = "\\]";
            imp_c["?"] = "\\?";
            s = s.replace(imp,function(o){
                return imp_c[o];                       
            });    
            return s;
        };
        $(this).each(function(){
            var t = $(this);
            str = $.trim(str);
            if(str === ""){
                alert("关键字为空");    
                return false;
            }else{
                //将关键字push到数组之中
                var arr = [];
                if(sets.divFlag){
                    arr = str.split(sets.divStr);    
                }else{
                    arr.push(str);    
                }
            }
            var v_html = t.html();
            //删除注释
            v_html = v_html.replace(/<!--(?:.*)\-->/g,"");
            
            //将HTML代码支离为HTML片段和文字片段,其中文字片段用于正则替换处理,而HTML片段置之不理
            var tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
            var a = v_html.match(tags), test = 0;
            $.each(a, function(i, c){
                if(!/<(?:.|\s)*?>/.test(c)){//非标签
                    //开始执行替换
                    $.each(arr,function(index, con){
                        if(con === ""){return;}
                        var reg = new RegExp($.regTrim(con), "g");
                        if(reg.test(c)){
                            //正则替换
                            c = c.replace(reg,"♂"+con+"♀");
                            test = 1;
                        }
                    });
                    c = c.replace(/♂/g,"<span rel='mark' "+clStr+">").replace(/♀/g,"</span>");
                    a[i] = c;
                }
            });
            //将支离数组重新组成字符串
            var new_html = a.join("");
            
            $(this).html(new_html);
            
            if(test === 0 && sets.nullReport){
                alert("没有搜索结果");    
                return false;
            }
            
            //执行回调函数
            sets.callback();
        });
    };
})(jQuery);

hexllo | 园豆:405 (菜鸟二级) | 2013-01-29 10:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册