JQuery+JS实现仿百度搜索结果中关键字变色效果

2014-03-01  来源:本站原创  分类:jquery  人气:2 

JQuery+JS实现仿百度搜索结果中关键字变色效果代码,需要的朋友可以参考下。

1.源码

<script type="text/javascript">
$(function() {
$("#btn_1").click(function() {
var $keyword = $("#Text1").val()
setHeightKeyWord('bbb', $keyword, 'Red', true)
});
});
function setHeightKeyWord(id, keyword, color, bold) {
if (keyword == "")
return;
var tempHTML = $("#" + id).html();
var htmlReg = new RegExp("\<.*?\>", "i");
var arrA = new Array();
for (var i = 0; true; i++) {
var m = htmlReg.exec(tempHTML);
if (m) {
arrA[i] = m;
}
else {
break;
}
tempHTML = tempHTML.replace(m, "[[[[" + i + "]]]]");
}
var replaceText
if (bold)
replaceText = "<b style='color:" + color + ";'>$1</b>";
else
replaceText = "<font style='color:" + color + ";'>$1</font>";
var arrayWord = keyword.split(',');
for (var w = 0; w < arrayWord.length; w++) {
var r = new RegExp("(" + arrayWord[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
tempHTML = tempHTML.replace(r, replaceText);
}
for (var i = 0; i < arrA.length; i++) {
tempHTML = tempHTML.replace("[[[[" + i + "]]]]", arrA[i]);
}
$("#" + id).html(tempHTML);
}
</script>
相关文章
  • JQuery+JS实现仿百度搜索结果中关键字变色效果 2014-03-01

    JQuery+JS实现仿百度搜索结果中关键字变色效果代码,需要的朋友可以参考下. 1.源码 <script type="text/javascript"> $(function() { $("#btn_1").click(function() { var $keyword = $("#Text1").val() setHeightKeyWord('bbb', $keyword, 'Red', true) }); }); functio

  • jQuery 插件仿百度搜索框智能提示(带Value值) 2013-10-02

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个,代码给予简单的注释,结构很清晰,很容易看懂,感兴趣的朋友可以了解下 因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete =

  • JS仿百度搜索自动提示框匹配查询功能 2015-02-24

    这篇文章主要介绍了JS输入框模糊匹配查询功能,主要是仿百度搜索自动提示框的功能,大家参考使用吧 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls&quo

  • js实现仿百度瀑布流的方法 2014-04-10

    这篇文章主要介绍了js实现仿百度瀑布流的方法,以完整实例形式分析了js仿百度瀑布流的相关样式与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现仿百度瀑布流的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>仿百度图片瀑布流</title> <link rel=&qu

  • JS实现仿百度输入框自动匹配功能的示例代码 2015-02-02

    本篇文章主要是对JS实现仿百度输入框自动匹配功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东. <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:ve

  • php+ajax做仿百度搜索下拉自动提示框(有实例) 2014-01-27

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 <?

  • 基于jquery实现的类似百度搜索的输入框自动完成功能 2014-07-18

    自动完成功能是指:类似百度搜索之类的输入一个词的一部分后就自动提示,然后用户可以选择,不需要再输入剩余部分. 废话不多说,直观的看一下: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <

  • 基于jquery的仿百度搜索框效果代码 2013-11-29

    最近项目中用到类似百度的输入框,于是自己用jquery写了一个.希望和大家共同分享一下.存在许多bug,请各位不吝赐教. 先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default&q

  • jquery 仿百度搜索下拉框的插件 2015-01-07

    今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出来的值 css .select4_box{border: 1px solid #5897fb;position: absolute;width:250px;background: #fff; border-radius: 4px;-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); box-shadow: 0 4px 5px rgba(0, 0, 0, .15);z-inde

  • 基于jquery的仿百度的鼠标移入图片抖动效果 2014-04-24

    在鼠标放到图片上, 图片会有个上下抖动的特效.很喜欢这种感觉.在于是摸索了一下,下面是一些步骤. 1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: <div id ="task-intro-box"><!--活动说明--></div> <div id ="task-awards"><!--活动

  • jquery博客仿百度空间相册展示相册效果文字显隐 2012-10-11

    jquery博客每天重复这一样的事情,不断的切图做页面,哪边样式出问题了,马上就去改,又有新的需求,马上去做,生成DEMO页面,好方便后端的同事们调试. 商场的页面每天继续忙不停的做,前端伤不起,来面试的不是经验不足,就是吊儿郎当的,擦,纠结. 后端哥们在做客户管理中心功能,需要一个相册,参考了,网易,新浪,百度的,最终定下来,整个百度空间相册的吧. 大致是这样的 里面的背景图片盗用的是百度空间的 背景图片蛮大的,我们不需要那么多,用到个background定位 后面的显隐页面那就更简单了,鼠标

  • .NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路 2014-11-09

    搞了个不是局部刷新的百度搜索框下拉提示效果大致思路:前台放一个input标签,然后当该标签内的值输入有变化的时候,调用后台代码查询 符合条件的数据绑定ListBox,感兴趣的朋友可以了解下 搞了个不是局部刷新的百度搜索框下拉提示效果,在被领导批了n次后,问了n次后,弄出来了,真心感觉我这个小脑壳,太不灵光了,太懒了.记录下来,以免忘记. 大致思路:前台放一个input标签,然后当该标签内的值输入有变化的时候,调用后台代码查询 符合条件的数据绑定ListBox. 具体实现思路:一个input,当输

  • 百度搜索结果出现众多自己内容 被讽刺为"百度站内搜索" 2013-12-23

    国外刚刚有媒体联合声讨:谷歌就是个小偷,自己不创造任何有价值的信息,却凭着自己的google搜索引擎扒取别人的信息,赚的满肚肥油,而信息的原创者却基本得不到好处. 话刚说到谷歌这,百度就乐了,看我:我有牛B哄哄的贴吧.知道.搜索结果必在第一位的百度百科,又有百度Hi空间.百度地图.hao123,再加上百度有啊.百度hi.百付宝,谷歌你这自己不种地的小样,想不饿死都不行. 的确,当我们突然发现,百度林林总总57种功能时,我们不尽愕然,在百度里面逛逛不就行了么,费那事干嘛? 百度改叫百度站内搜索并非

  • 教你怎样成为百度搜索的第一 2014-09-10

    百度排名NO.1在SEO(Search Engine Optimization)中其实也不算什么,此处笔者仅仅是为了通过百度排名第一位来说明SEO的相对通用的方法.当搜索引擎优化从一个鲜为人知的词语,成为名扬网络推广界的频繁用词的时候,百度排名(此处指的是左侧优化排名,不是付费竞价排名那种)相比Google排名似乎被冷落了,当诸多SEOer热衷于Google排名的时候,笔者对百度搜索却不敢忽略.之所以如此认为,是因为我在实践中发现百度有优于Google的方面,百度排名也有优于Google排名的方

  • 百度搜索结果图文标识规则分析 不指定 2015-03-15

    在百度搜索时,经常会出现搜索结果中包含图片的情况,称之为:图文标识 或 图文展现.这种图文并茂的展现方式,是百度知心算法的扩展,伴随百度新的一年对精准搜索.快速展示.贴心服务等方面的重视,逐渐出现了更加贴切用户搜索习惯的方式.按照官方的话术来讲:数据标注工具,是一种快速将网站结构化数据提交给百度的方式.您只要用鼠标简单的划选,百度就可以快速学习如何从您网站中提取结构化数据,之后这些信息能在百度搜索结果中以富摘要的形式展现,提升网站的形象和流量.也就是通过学习行为,记录用户访问者的所有方式,达到更

  • 安全联盟对百度搜索结果排名影响浅析 2013-09-02

    特别提示:以下数据仅供参考分析,不代表最终结论! 在网站安全市场,已经出现了两大安全阵营,一是来自知道创宇的安全联盟,二是来自360的网盾.这两家安全中心走的都是攻防一体的路线,我这里简单介绍下,大家对两大阵营有所了解. 知道创宇:面向站长的有"网站安全中心"和"加速乐",面向大众的则是"安全联盟",目前与百度.腾讯.搜狗都有合作,并得到了推荐.尤其是百度,在搜索结果上主要采用了安全联盟的数据库.目前来看腾讯虽与其合作,但有自己单干的意思. 36

  • JS实现仿google.百度搜索框输入信息智能提示的实现方法 2013-12-17

    这篇文章主要介绍了JS实现仿google.百度搜索框输入信息智能提示的实现方法,实例分析了javascript实现智能提示功能的技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

  • 仿百度的关键词匹配搜索示例 2015-02-03

    关键词匹配搜索想必大家一定会想到百度,下面有个不错的示例,感兴趣的朋友可以参考下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关键词匹配搜索仿百度</title> <meta name="description&

  • 仿百度输入框智能提示的js代码 2014-04-09

    这篇文章介绍了仿百度输入框智能提示的js代码,有需要的朋友可以参考一下 最近客户需求老是变更,不过有些是因为客户催得急,我没有那么快能完成,所以先做了一个雏形给他们,后来再慢慢改.比如雏形那里我做了一个下拉列表给他们,事实上他们的数据有200多条,用个下拉列表的话很不现实,你能找那么多?而且那个下拉列表该有多长啊?所以很自然的,我想到了百度那个智能提示的功能. 参考了一下之前忘记是哪位大侠写的东西,他的是使用百度api的,为了简单起见,我把数据都定在了js那里,这样看官们容易理解一些. 还是整个

  • js仿百度贴吧验证码特效实例代码 2014-11-11

    这篇文章主要介绍了js仿百度贴吧验证码特效实例代码,有需要的朋友可以参考一下 今天看到有百度验证码挺有意思的,就把它仿下来了. 利用JS实现当选择满4个后自动对比,本文中采用静态对比的方法看你是否全部选择对.然后提示[答案正确!]或[答案错误!], 以后有空再去做成程序,先分享给大家! 效果图如下: 源代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o