基于jquery的划词搜索实现（备忘）
参照页面:http://www.jb51.net/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>
<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>
<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实现的，这个方案，存在的问题是：对包含多个英文单词搜索的，只取了其中一部分进行划词搜索。有待进一步完善。
相关推荐
-
基于jquery的划词搜索实现（备忘）
参照页面:http://www.jb51.net/article/24825.htm 一.DragSearchByJQuery.aspx页面(调用页面) 复制代码 代码如下: <head runat="server"> <title>划词搜索</title> <style type="text/css"> /*search*/ a.GL_s{width:68px;height:20px;display:block;bo
-
基于jquery的页面划词搜索JS
基于Jquery修改,以下为全部脚本 复制代码 代码如下: //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert('Google搜索已关闭'); } else { GLS.allow = true; alert('Google搜索已打开'); } }; GLS
-
javascript 页面划词搜索JS
基于Jquery修改,以下为全部脚本 复制代码 代码如下: //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert('Google搜索已关闭'); } else { GLS.allow = true; alert('Google搜索已打开'); } }; GLS
-
javascript 实现划词标记划词搜索功能
javascript实现划词标记划词搜索功能 0) { str=oText.text; oText.text="BuB"+oText.text+"EuE"; } oText.select(); event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","").replace("EuE",""); } searc
-
jquery实现联想词搜索框和搜索结果分页的示例
index.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti
-
利用Python通过获取剪切板数据实现百度划词搜索功能
一.实现划词功能 说是划词翻译,实际上我们是通过获取用户的剪切板内容,通过一系列的操作得到的.首先呢,我们就先实现如何获取剪切板内容的程序 首先先在桌面创建一个文件夹,命名为"MoveSearch"文件夹 之后我们双击点入这个文件夹,创建一个"MainWindow.py"的程序和"Clipborad.py"这两个程序 我们这里使用Sublime进行操作演示,我们点开"ClipBoard.py"的文件,然后我们按照下面的图片添加
-
javascript实现划词标记+划词搜索功能
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
基于jquery的仿百度搜索框效果代码
先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT
-
javascript实现划词标记划词搜索功能修正版
Untitled Document 0) { str=oText.text; oText.text="BuB"+oText.text+"EuE"; } oText.select(); event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","").replace("EuE",""); } searchgoog
-
基于jQuery实现搜索关键字自动匹配功能
今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut