web查找功能示例共享的jQuery实现

为了找到站名为例，仿12306网站找到车站售票页面的时间效应，当用户输入一个关键词，点击搜索按钮或按回车键，通过正则匹配jQuery，精确匹配的关键词，并迅速滚动到第一页的位置，位置，并显示相关信息（开始在这种情况下，车站售票附加信息的时间）。

HTML

页面需要输入一个输入框来输入要搜索的键，还有一个查找按钮。然后，它的主要内容是#内容，其中包含N，即卖票，每个时间段的站名。
复制代码代码如下所示：

U3000



车站8点开始营业。
安阳、拜城、北京西部、成都东部、大庆、大庆、欧美地区、东莞、东莞、East、惠州、金华南部、金华、金华、汇合，
齐齐哈尔、青田、Rizhao、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、Wuyi、西安、永康、运城。
…这里省略n



CSS

简单地设置CSS设置页面内容，突出和#尖用于设置的搜索结果显示的方式影响和高亮框，这将在后面介绍。
复制代码代码如下所示：
# search_box {背景：白色；不透明度：0.8；文本对齐：右}
# search_btn {背景：# 0f79be；边距：6px；边界半径：2px；边界：0px；
宽度：100px；线高度：24px；颜色：白色；}
# searchstr {字体大小：14px；高度：20px；}
高亮显示背景：黄色；颜色：红色；}
#尖{背景：# FFC；边框1px solid # 999；宽度：110px；文本对齐：中心；
显示：无；字体大小：12px；}


jQuery

首先，我们要实现一个固定部的影响当页面滚动下来，发现输入框和按钮总是固定在页面的顶部，这样我们可以继续搜索。

复制代码代码如下所示：
（函数（$）{）
美元。fn.fixdiv =功能（选项）{
无功defaultval = { {
上图：10
}；
var obj = $（defaultval延长，选项）；
$ =；
无功_top = this.offset美元（顶部）；
无功_left = this.offset美元（左）；
$（窗口）。滚动（函数（）{）
无功_currenttop = this.offset美元（顶部）；
无功_scrolltop = $（document）的ScrollTop（）；
如果（_scrolltop > _top）{
this.offset美元（{
上图：_scrolltop + obj.top，
左：_left
}）；
{人}
this.offset美元（{
上图：_top，
左：_left
}）；
}
}）；
返回$此；
}；
}（jQuery）；


下一步，我们称fixdiv（）。

复制代码代码如下所示：
$（函数（）{（））
$（# search_box）。FixDiv（{ 0 }：）；
}）；


接下来，查找函数的最关键的实现。当您输入键时，单击查找按钮或按返回键调用查找函数高亮（）。

复制代码代码如下所示：
$（函数（）{（））
…
$（# search_btn）。Click（突出）； / /点击搜索，执行功能的彰显；
$（# searchstr）。Keydown（function（e）{
var = e；
如果（键= 13）（突出显示）；
}）
…
}）；


函数高亮（）需要做很多事情，最后1个。空突出显示的内容，2。隐藏和空洞的信息，3。输入确定内容是空的，4。获取输入关键字、规则和页面内容，并用标志搜索结果标记，搜索结果将被高亮显示，根据5。搜索结果的数量，确定内容和位置偏移信息，准确定位并显示一条信息。请查看具体代码：

复制代码代码如下所示：
$（函数（）{（））
…
var I＝0；
无功scurtext；
函数高亮（）{
（clearselection）； / /首先明确一下最后强调的内容；

var标志= 0；
无功bstart =真；

$（#顶）。文本（）；
$（#顶）隐藏（）；
VaR SearchText =（#美元searchstr）。瓦迩（）；
_searchtop = $（var的# searchstr）。偏移（）前30；
_searchleft = $（var的# searchstr）。偏移（左）；
如果（美元。修剪（SearchText）= ={）
showtips（请输入车站，取名叫_searchtop，3，_searchleft）；
返回；
}
找到匹配项
VaR SearchText =（#美元searchstr）（。Val）； / /让你的关键词；
VaR regexp = new RegExp（要查找的文字，'克'）； / /创建一个正则表达式，G说全球，如果不是G，
是第一次查找不会继续往下看吗；
无功量=美元（#内容文本（））；
如果（！regexp.test（内容））{
showtips（不站找到
返回；
{人}
如果（scurtext！= SearchText）{
我= 0；
scurtext =要查找的文字；
}
}
突出显示
$（'p'）。每个（函数（）{）
Html（）；
查找关键字替换，添加高亮属性；
无功newhtml = html.replace（regexp，'' + SearchText +）；
$（这）。Html（newhtml）； / /更新；
标志＝1；
}）；

/定位和消息
如果（标志= 1）{
如果（$ 高亮）。大小（）> 1）{
无功_top = $（，强调）。Eq（我）。偏移（）。顶+ $（，强调）。Eq（我）Height（）；
无功_tip = $（，强调）。Eq（我）。父（），发现（强）的文本（）；
如果（_tip = =）_tip = $（，强调）。Eq（我）。父（母），（），（强）的文本（）；
无功_left = $（，强调）。Eq（我）。偏移（左）；
无功_tipwidth = $（#尖）Width（）；
如果（_left > $（document）。Width（）- _tipwidth）{
_left = _left - _tipwidth；
}
$（#尖），Html（_tip）显示（）；
$（#尖）。偏移（{顶：_top，左：_left }）；
$（# search_btn）。瓦迩（查找下一个）；
其他{ }
无功_top = $（，强调）。偏移（）。顶+ $（，强调）。Height（）；
无功_tip = $（，强调）。父（），发现（强）的文本（）；
无功_left = $（，强调）。偏移（左）；
$（#尖），表明（）；
$（#尖），Html（_tip）。偏移（{顶：_top，左：_left }）；
}
$（HTML、体）。动画（{ scrollTop：_top 50 }）；
++；
如果（$ .）大小（）- 1）{
我= 0；
}
}
}
…
}）；


的clearselection（）函数在上面的代码中提到的用于清除亮度的影响。代码如下：

复制代码代码如下所示：
功能clearselection（）{
$（'p'）。每个（函数（）{）
查找元素的所有突出显示属性；
$（this）。查找（突出显示）。每个（函数（）{（）{））
（美元（美元。用）（这）（HTML））； / /将删除属性；
}）；
}）；
}


最后，添加showtips（）函数，它的输入查找关键字后，用于显示提示信息的查找。

复制代码代码如下所示：
$（函数（）{（））
无功tipsdiv =；
（'body美元的追加（tipsdiv））；
功能showtips（技巧、高度、时间、左）{
VaR WindowWidth = document.documentelement.clientwidth；
$（'。tipsclass）文本（TIPS）；
$（'div.tipsclass）。Css（{
顶：高度+ 'px，
左：左+ 'px，
位置：将，
填充：'8px 6px，
背景：000000#，
字体大小：14 + 'px，
字体重量：900，
缘：0汽车，
文本对齐：'center，
宽度：汽车，
'色'：' # FFF，
边界半径：'2px，
不透明度：'0.8，
'box-shadow':'0px 0px 10px #000',
影子：'0px MOZ盒0px 10px # 000，
影子：'0px WebKit盒0px 10px # 000
}）显示（）；
setTimeout（函数（）{ $（'div.tipsclass）。FadeOut（）；}，（时间* 1000））；
}
}）；