编程 Javascript

基于jquery的划词搜索实现（备忘）

Posted in Javascript onSeptember 14, 2010

参照页面:https://3water.com/article/24825.htm

一、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>

（参照网址为：https://3water.com/article/20610.htm）
不过，相对上面用JQuery实现的，这个方案，存在的问题是：对包含多个英文单词搜索的，只取了其中一部分进行划词搜索。有待进一步完善。

基于jquery的划词搜索实现（备忘）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题

Jan 09 Javascript

js从10种颜色中随机取色实现每次取出不同的颜色

Oct 23 Javascript

Html5的placeholder属性(IE兼容)实现代码

Aug 30 Javascript

JavaScript中的substr()方法使用详解

Jun 06 Javascript

实例讲解JS中setTimeout()的用法

Jan 28 Javascript

AngularJS延迟加载html template

Jul 27 Javascript

Vue 2.X的状态管理vuex记录详解

Mar 23 Javascript

浅谈原生JS中的延迟脚本和异步脚本

Jul 12 Javascript

js防抖函数和节流函数使用场景和实现区别示例分析

Apr 11 Javascript

小程序实现上传视频功能

Aug 18 Javascript

vue 解决mintui弹窗弹起来,底部页面滚动bug问题

Nov 12 Javascript

利用JavaScript为句子加标题的3种方法示例

Jan 05 Javascript

基于jquery的页面划词搜索JS

Sep 14 #Javascript

基于Jquery的实现回车键Enter切换焦点

Sep 14 #Javascript

js输出列表实现代码

Sep 12 #Javascript

JavaScript日历实现代码

Sep 12 #Javascript

某页码显示的helper 少量调整，另附js版

Sep 12 #Javascript

网页中CDATA标记的说明

Sep 12 #Javascript

JavaScript小技巧 2.5 则

Sep 12 #Javascript