jquery实现网页查询功能示例分享

发布时间：2023-10-07 15:06:50 所属栏目：教程来源：

导读：本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jQuery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息（本例

本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jQuery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息（本例中附加信息为车站开始售票时间）。

HTML

页面需要放置一个输入框用来输入要查找的关键字，以及一个查找按钮，然后就是主体内容#content，里面包含着n个<p>，即每个时间段开售车票的车站名。

  代码如下:

<div id="search_box">

    <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />　

    <input class="sbttn" id="search_btn" type="button" value="页内查找" />

</div>

<div id="content">

    <p><strong>8：00 起售车站</strong><br />

　　安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、

齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p>

    ....此处省略n个p

</div>

CSS

简单的对页面内容进行CSS设置，其中.highlight和#tip分别用来设置查找结果高亮显示和信息提示框显示的样式效果，后面我们会介绍到。

代码如下:

#search_box { background: white; opacity: 0.8; text-align:right }

#search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px;

width: 100px; line-height: 24px; color: white; }

#searchstr { font-size: 14px; height: 20px; }

.highlight { background: yellow; color: red; }

#tip { background: #ffc; border: 1px solid #999; width: 110px; text-align: center;

display: none; font-size: 12px; }

jQuery

首先，我们要实现一个固定div的效果，就是当页面往下拉滚动时，用于查找的输入框和按钮始终固定在页面的最顶部，方便继续查找。

  代码如下:

(function($) {

    $.fn.fixDiv = function(options) {

        var defaultVal = {

            top: 10

        };

        var obj = $.extend(defaultVal, options);

        $this = this;

        var _top = $this.offset().top;

        var _left = $this.offset().left;

        $(window).scroll(function() {

            var _currentTop = $this.offset().top;

            var _scrollTop = $(document).scrollTop();

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!