管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　参照页面:http://www.glzy8.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>

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

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

教程首页 更多教程