如何在静态的html里实现搜索功能？
所有回答(7)
0
搜索什么，搜索数据库中东西吗？
在静态页面使用ajax调用后台的操作搜索
0
楼主要搜索什么？
在静态页面里搜索，比如，在静态页面里，有文章，然后在搜索栏里输入某个文字，然后查找文章里这个字，就是这个意思，可以用js实现的，但是不知道怎么去做。
@不抛弃: 游览器自身提供的ctrl+f 就可以完成你的功能 ，还需要自己写JS？
0
利用js可以解决 原理 show和hide加+字符串处理 需要的话我明天上班可以提供案例
在吗？我想就用js去解决，可不可以提供一个案列啊？？
@不抛弃:
$("domID")
.hide()
.filter(":contains('" + $("domID").val() + "')")
.show();
$("domID").val() 就是你要输入的文本框的值 记得引用jq文件
0
搜索什么东西？
在静态页面里搜索，比如，在静态页面里，有文章，然后在搜索栏里输入某个文字，然后查找文章里这个字，就是这个意思，可以用js实现的，但是不知道怎么去做。
@不抛弃: 首先你要确定你的搜索域（搜索区域），然后提取文字jquery用.text()方法，js用innerText方法，简单点用indexOf确定文字
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/
1
输入搜索值：
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>
<form>
<input type="text" class="txt" id="searchValue" value="请输入要搜索的关键词" />
<input type="button" class="btn" value="搜索" onclick="javascript:search()"/>
</form> 因为想要CSS效果，但放到form里却实现不了功能，这是为何
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);
