使用jQuery简单实现模拟浏览器搜索功能

写的匆忙，示意一下，有待完善。把以下代码复制到文本文件中，把文件扩展名改为.html就可以运行了。

代码如下:

<html>
<head>
    <style type="text/css">
        .res
        {
            color: Red;
        }
    </style>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var oldKey = "";
        var index = -1;
        var pos = new Array();
        var oldCount = 0;

function search(flg) {
            if (!flg) {
                index++;
                index = index == oldCount ? 0 : index;
            }
            else {
                index--;
                index = index < 0 ? oldCount - 1 : index;
            }

$(".result").removeClass("res");
            $("#toresult").remove();
            var key = $("#key").val(); //取key值
            if (!key) {
                oldKey = "";
                return; //key为空则退出
            }

if (oldKey != key) {
                //重置
                index = 0;
                $(".result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                pos = new Array();

$("body").html($("body").html().replace(new RegExp(key, "gm"), "<span id='result" + index + "' class='result'>" + key + "</span>")); // 替换

$("#key").val(key);
                oldKey = key;
                $(".result").each(function () {
                    pos.push($(this).offset().top);
                });
                oldCount = $(".result").length;
            }

$(".result:eq(" + index + ")").addClass("res");

$("body").scrollTop(pos[index]);
        }
    </script>
</head>
<body>
    <div style="position: fixed; right: 20px; top: 0;">
        <input id="key" type="text" style="width: 100px;" />
        <input type="button" value="下一个" onclick="search()" />
        <input type="button" value="上一个" onclick="search(1)" />
    </div>
    <div style="height: 50px;">
    </div>
    <div style="height: 200px;">
        1待搜索的文本。
    </div>
    <div style="height: 200px;">
        2待搜索的文本。
    </div>
    <div style="height: 200px;">
        3待搜索的文本。
    </div>
    <div style="height: 200px;">
        4待搜索的文本。
    </div>
    <div style="height: 200px;">
        5待搜索的文本。
    </div>
    <div style="height: 200px;">
        10美丽的家乡。
    </div>
    <div style="height: 200px;">
        11美丽的家乡。
    </div>
    <div style="height: 200px;">
        12美丽的家乡。
    </div>
    <div style="height: 200px;">
        13美丽的家乡。
    </div>
    <div style="height: 200px;">
        14美丽的家乡。
    </div>
    <div style="height: 200px;">
        15美丽的家乡。
    </div>
</body>
</html>

这里主要是个大家提供一个思路，小伙伴们等不及的话就自己完善下吧。

赞 (0)

相关推荐

  • jQuery实现动态文字搜索功能

    jQuery实现动态文字搜索功能

    先简单讲一下需求:页面中会列出多行个人信息记录,为方便查找,在顶层增加一个搜索栏,可根据用户姓名查找记录. 如果只想查看代码,可跳过分析过程,文章底部提供了完整的代码. 以下是我的编写过程: 动态页面,多条记录均由forEach生成,结构如下: <form name="userForm"> <table style="width:200px;"> <thead> <tr> <th> </th>

  • 基于jQuery实现页面搜索功能

    基于jQuery实现页面搜索功能

    jQuery实现页面搜索,搜索筛选用户输入的内容! HTML: <div class="table"> <table> <tr id="theader"> <th>姓名</th> <th>性别</th> <th>联系方式</th> </tr> <tr> <td>客服</td> <td>女</td

  • 基于jQuery实现动态搜索显示功能

    基于jQuery实现动态搜索显示功能

    本文实例使用jQuery实现动态搜索显示功能,只要输入值就能立刻动态显示数据,不同于常规查询方法,供大家参考,具体内容如下 模拟效果如下: 情况1: 情况2: 实现代码: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> &l

  • jquery仿搜索自动联想功能代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

  • asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了): .首先根据关键字列出关键字相关的信息(包含统计信息) .可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换 .当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东

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

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

    废话不多说,直观的看一下: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/x

  • Jquery实现搜索框提示功能示例代码

    Jquery实现搜索框提示功能示例代码

    博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数据量很大的情况下使用Ajax去实现真的不合适,于是,我又写了一个使用Jquery来实现方法. 废话不多说,上图上代码:  引用方式: 复制代码 代码如下: <body style="background-color: White;"> <form id="for

  • 基于jQuery实现搜索关键字自动匹配功能

    基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

  • jquery 模拟类搜索框自动完成搜索提示功能(改进)

    autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键

  • jquery ztree实现模糊搜索功能

    jquery ztree实现模糊搜索功能

    本文分享了jquery ztree实现模糊搜索功能两个实例,供大家参考,具体内容如下 ztree官方demo代码里的: 根据参数查找节点 以上文件修改成如下代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <meta http-equiv="con

随机推荐