编程 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 相关文章推荐

JavaScript实现点击按钮后变灰避免多次重复提交

Jul 15 Javascript

小结Node.js中非阻塞IO和事件循环

Sep 18 Javascript

使用Sticker.js实现贴纸效果

Jan 28 Javascript

jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

Jun 12 Javascript

BootStrap智能表单实战系列(七)验证的支持

Jun 13 Javascript

简单实现bootstrap导航效果

Feb 07 Javascript

详解vue渲染从后台获取的json数据

Jul 06 Javascript

React Native中NavigatorIOS组件的简单使用详解

Jan 27 Javascript

关于vue v-for循环解决img标签的src动态绑定问题

Sep 18 Javascript

解决Vue项目中tff报错的问题

Oct 21 Javascript

vue前端和Django后端如何查询一定时间段内的数据

Feb 28 Vue.js

前端框架ECharts dataset对数据可视化的高级管理

Dec 24 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