划词搜索实现（备忘）

zoukankan html css js c++ java

划词搜索实现（备忘）

最近，需要做个划词搜索功能。在网上找了好些，最后，参照http://www.cnblogs.com/xinxi/archive/2009/09/28/1575466.html进行修改，实现了想要的功能。这里，做个记录，以备日后所用。

一、DragSearchByJQuery.aspx页面（调用页面）

代码

<head runat="server">
    <title>划词搜索</title>
    <style type="text/css">
    /*search*/
    a.GL_s{68px;height:20px;display:block;border:solid 1px #2b7ab7;line-height:20px;padding-left:18px;color:#084f10;font-size:12px;font-weight:bold;background:url(search.gif) no-repeat left;text-decoration:none;}
    a.GL_s:link{filter:alpha(opacity=71);-moz-opacity:0.7;opacity: 0.7;}
    a.GL_s:hover{filter:alpha(opacity=100);-moz-opacity:1.0;opacity: 1.0;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align: center;">
            <input type="button" value="关闭/打开划词功能" />
            <p>
                《红楼梦》是我国古代四大名著之一，属章回体长篇小说，成书于1784年（清乾隆帝四十九年）。梦觉主人序本正式题为《红楼梦》，它的原名《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。是我国古代最伟大的长篇小说，也是世界文学经典巨著之一。作者曹雪芹。现通行的续作是由高鹗续全的一百二十回《红楼梦》。
            </p>
            <p>
                if you want to search,one way is to Google,one of the others is Baidu</p>
        </div>
    </form>
</body>
</html>

相关JQuery

代码

<script type="text/javascript" src="JS/JQuery/jquery-1.4.2.min.js"></script>

<script type="text/javascript" language="javascript">
    //划词搜索
    var GLS = {};
    GLS.startObj = null;
    GLS.isdb = false;
    GLS.allow = true;
    GLS.isallow = function() {
        if (GLS.allow) {
            GLS.allow = false;
            alert('搜索已关闭');
        }
        else {
            GLS.allow = true;
            alert('搜索已打开');
        }
    };

    GLS.dblclick = function() {
        GLS.isdb = true;
    };

    GLS.mousedown = function(evt) {
        evt = (evt) ? evt : ((window.event) ? window.event : "");
        if (evt) {
            GLS.startObj = (evt.target) ? evt.target : evt.srcElement;
        }
    };

    GLS.mouseup = function(evt) {
        var obj;
        var strlen;
        evt = (evt) ? evt : ((window.event) ? window.event : "");
        if (evt) {
            obj = (evt.target) ? evt.target : evt.srcElement;
            strlen = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
        }
        var str = "";
        if (obj.tagName != "A" && obj.tagName != "INPUT" && obj == GLS.startObj && !GLS.isdb && GLS.allow) {
            if (strlen.length > 0) {
                str = strlen;
            }
        }
        GLS.search(str, evt);
        GLS.isdb = false;
    };

    GLS.search = function(str, evt) {
        var obj = $("#GLSearch");
        var sDivWidth = 88; //检索框“Google搜索”的宽度
        if (str.toString().length > 0) {
            var windowWidth; //窗口的宽
            //取得窗口的宽
            if (self.innerWidth) {
                windowWidth = self.innerWidth;
            } else if (document.documentElement && document.documentElement.clientWidth) {
                windowWidth = document.documentElement.clientWidth;
            } else if (document.body) {
                windowWidth = document.body.clientWidth;
            }
            obj.css({ 'display': 'block', 'position': 'absolute', 'zindex': '10000' });
            var rX, rX, wT;
            if ($.browser.msie) {
                wT = (evt.clientX + sDivWidth) - windowWidth;
                rY = document.documentElement.scrollTop + evt.clientY;
                rX = document.documentElement.scrollLeft + evt.clientX;
                rY = (evt.clientY < 35) ? (rY + 5) : (rY - 35);
                rX = (wT > 0) ? (rX - wT) : (rX + 5);
            }
            else {
                var sT = (document.documentElement.scrollTop > 0) ? document.documentElement.scrollTop : document.body.scrollTop;
                wT = (evt.pageX + sDivWidth) - windowWidth;
                rY = ((evt.pageY - sT) < 35) ? (evt.pageY + 5) : (evt.pageY - 35);
                rX = (wT > 0) ? (evt.pageX - wT) : (evt.pageX + 5);
            }
            obj.css("top", rY);
            obj.css("left", rX);
//          obj.html("<a class='GL_s' target='_blank' href='http://www.google.com/search?ie=UTF-8&oe=UTF-8&q=" + encodeURIComponent(str) + "'>Google搜索</a>");
            obj.html("<a class='GL_s' target='_blank' href='Search.aspx?q=" + encodeURIComponent(str) + "'>搜索</a>");

        }
        else {
            obj.css("display", "none");
        }
    };

    //页面加载
    $(document).ready(function() {
        $(document.body).append("<div id='GLSearch'></div>");
        $(document).mousedown(GLS.mousedown).dblclick(GLS.dblclick).mouseup(GLS.mouseup);
    });
</script>

二、Search.aspx页面（被调用页面）

代码

        <div style="text-align: center;">
            <div style=" 600px; padding-left: 20px;">
                <asp:TextBox ID="txtContent" runat="server"></asp:TextBox>
                <asp:Button ID="btnSearch" runat="server" Text="搜索" OnClick="btnSearch_Click" />
                <asp:Label ID="lblNote" runat="server" Text="" ForeColor="red"></asp:Label>
            </div>
        </div>

后台

代码

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.txtContent.Text = Request.QueryString["q"].ToString();
                btnSearch_Click(sender, e);
            }
        }

        protected void btnSearch_Click(object sender, EventArgs e)
        {
            this.lblNote.Text = "搜索关键字为：" + this.txtContent.Text;
        }

三、附注

1、使用encodeURIComponent代替 escape的原因

　　escape() 只是为 ASCII字符做转换工作，转换成的 %unnnn 这样的码，如果要用更多的字符如 UTF-8字符库就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以escape() 只是为 ASCII字符做转换工作，转换成的 %unnnn 这样的码，如果要用更多的字符如 UTF-8字符库就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以。
　　来源：请参见http://www.misuisui.com/weblog/?p=418

2、网上有一篇是使用Javascript实现的，具体代码为：

代码

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="DragSearch.aspx.cs" Inherits="CanYou.AutoComplete.Web.DragSearch" %>

<!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 runat="server">
    <title>划词搜索</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align: center;">
            <input type="button" onclick="isallow()" value="关闭/打开划词功能" />
            <p>
                《红楼梦》是我国古代四大名著之一，属章回体长篇小说，成书于1784年（清乾隆帝四十九年）。梦觉主人序本正式题为《红楼梦》，它的原名《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。是我国古代最伟大的长篇小说，也是世界文学经典巨著之一。作者曹雪芹。现通行的续作是由高鹗续全的一百二十回《红楼梦》。
            </p>
            <p>
                if you want to search,one way is to Google,one of the others is Baidu</p>
        </div>
        
    </form>
</body>
</html>

<script type="text/javascript" language="javascript">
    
</script>

（参照网址为：http://www.jb51.net/article/20610.htm）

不过，相对上面用JQuery实现的，这个方案，存在的问题是：对包含多个英文单词搜索的，只取了其中一部分进行划词搜索。有待进一步完善。

查看全文

相关阅读:
redis 1 简单介绍和存储的数据结构
 mysql 14 覆盖索引+回表
 mysql 13 B+tree中存储数据的格式页
 java Arrays.asList() 数组转集合
 java 迭代器
 mysql 12 SQL优化策略
 mysql 11 执行计划
 mysql 10 索引面试题分享
 搭建一个开源项目2-打造另一个环境以及解决上期问题
 搭建一个开源项目1-如何搭建Linux虚拟机

原文地址：https://www.cnblogs.com/lybohe0807/p/1825347.html