划词搜索实现（备忘）

 

最近，需要做个划词搜索功能。在网上找了好些，最后，参照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{width: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 = " width: 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 " >  
     <!--  
    document.body.onload = adddiv; 
    document.onmousedown = recordobj; 
    document.ondblclick = dbclick; 
    document.onmouseup = showselect; 
    var starobj,isdb = false ,allow = true ; 
    function isallow() 
    { 
         if (allow){ 
            allow = false ; 
            alert( ' is closed ' ); 
        } 
         else { 
            allow = true ; 
            alert( ' is opened ' ); 
        } 
    } 
    
     // ondblclick
    function dbclick() 
    { 
        isdb = true ; 
    } 
    
     // onmousedown
    function recordobj() 
    { 
        starobj = event .srcElement; 
    } 
    
     // onmouseup
    function showselect() { 
        var str = "" ; 
         if ( event .srcElement.tagName != " A " && event .srcElement.tagName != " INPUT " && event .srcElement == starobj &&! isdb && allow) 
        { 
            var oText = document.selection.createRange(); 
             if (oText.text.length > 0 ) 
            { 
                str = oText.text; 
                oText.text = " BuB " + oText.text + " EuE " ; 
            } 
            oText.select(); 
             event .srcElement.innerHTML = event .srcElement.innerHTML.replace( " BuB " , " <u style='FONT-WEIGHT: bold;COLOR: #ff3366'> " ).replace( " EuE " , " </u> " ); 
        } 
        searchgoogle(str) 
        isdb = false ; 
    } 
    
    function searchgoogle(str) 
    { 
        var obj = document.getElementById( " searchgoogle " ); 
         if (str.length > 0 ) 
        { 
            obj.style.display = " block " ; 
            obj.style.position = " absolute " ; 
            obj.style.zindex = 999 ; 
            obj.style.posTop = document.body.scrollTop + event .y - 25 ; 
            obj.style.posLeft = document.body.scrollLeft + event .x + 5 ; 
            obj.style.widht = 80 ; 
            obj.innerHTML = " <a target=_blank href=http://www.google.com/search?ie=gbk&oe=gbk&q= " + str + "  style='BORDER-RIGHT: royalblue thin solid; BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold; BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none'>搜索相关</a> " ; 
        } 
         else  
        { 
            obj.style.display = " none " ; 
        } 
    } 
    
     // body.onload
    function adddiv() 
    { 
        var mobj  =  document.createElement( " div " ); 
        mobj.id = " searchgoogle " ; 
        document.body.appendChild(mobj); 
    } 
     // --> 
</ script >

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

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

 

转载于:https://www.cnblogs.com/lybohe0807/archive/2010/09/13/1825347.html