基于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.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 < 25) ? rY + 5 : rY - 25;
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) < 25) ? evt.pageY + 5 : evt.pageY - 25;
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>");
}
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);
});------------附上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;}----------search.gif图片

时间: 2010-09-12

基于jQuery实现搜索关键字自动匹配功能

今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

基于jQuery实现页面搜索功能

jQuery实现页面搜索,搜索筛选用户输入的内容! HTML: <div class="table"> <table> <tr id="theader"> <th>姓名</th> <th>性别</th> <th>联系方式</th> </tr> <tr> <td>客服</td> <td>女</td

jquery zTree异步加载、模糊搜索简单实例分享

本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:

CSS3,HTML5和jQuery搜索框集锦

添加搜素框或网站搜索功能是为了方便用户能够轻松.快捷地找到自己需要的信息.因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一.添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地浏览. 脉动的CSS3输入搜索框 输入搜索框带有边框和类似脉冲的阴影跳动. 纯CSS的建议搜索框 这是一个使用纯CSS构建扩展建议搜索框的简单教程. CSS的扩大搜索框 扩大搜索框是一个点击或输入东西时会变宽的一个简单搜索框. 使用CSS转换扩大搜索栏 我们将利用CSS转换扩展了的搜索栏.搜索栏最初

基于jquery的仿百度搜索框效果代码

先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT

jQuery实现的类似淘宝网站搜索框样式代码分享

运行效果图:                                                ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的类似淘宝网站搜索框样式代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

jquery ztree实现模糊搜索功能

本文分享了jquery ztree实现模糊搜索功能两个实例,供大家参考,具体内容如下 ztree官方demo代码里的: 根据参数查找节点 以上文件修改成如下代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <meta http-equiv="con

Jquery带搜索框的下拉菜单

1.样式引用: 复制代码 代码如下: <link rel="stylesheet" href="~/Js/Ddl_Chosen/chosen.css" /> 2.由于应用了Jquery,所以引用Jquery.(下载地址) 复制代码 代码如下: <script src="<%= ResolveUrl("~/Js/Jquery.js")%>" type="text/javascript&qu

基于jquery实现的类似百度搜索的输入框自动完成功能

废话不多说,直观的看一下: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/x

利用jQuery实现可输入搜索文字的下拉框

先看效果   功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: 复制代码 代码如下: var $xialaSELECT; $(document).ready(function(){ initXialaSelect(); initSearch(); }); var temptimeout=null; var query=""; function searchDev(key){ //if(key ==

ASP .NET 可编辑输入自动匹配的下拉框

一. 引用dll文件 二. aspx前台页面应用该控件 <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %> 小区: <teler

yii2带搜索功能的下拉框实例详解

简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有.都说到这个点上了,我们赶紧使用composer进行安装吧. 先给大家展示下效果图: 下面给大家说下具体实现思路: composer require kartik-v/yii2-widget-select2 "@dev" #特别说明,因为这里安装的dev版本,也就是开发版本,不稳定版本,如果

jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

例如"报告交付方式"包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下 报告交付方式: <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:true,valueField:'id',textField:'text' , onSelect:function(){ v

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap">         <div class="nice-select" name="nice-select&

js实现带搜索功能的下拉框

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1.介绍 在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的样式太丑.所以接下来利用div+p实现到输入文本的下拉框 2.思路 1 利用一个input充当搜索框,div+p充当下拉框放置于input的下方.如图所示: 2 接下来就是js的实现了,我们先把红色区域的div+p利用display:none隐藏起来. 对表单input添加onfocus

js实现带搜索功能的下拉框实时搜索实时匹配

1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT

基于jquery实现的可以编辑选择的下拉框的代码

效果图: 代码如下: 复制代码 代码如下: <!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> <title>

jQuery设置下拉框显示与隐藏效果的方法分析

本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() 方法则可以切换 hide() 和 show() 方法,也就是显示被隐藏的元素,并隐藏已显示的元素. $("select").hide(); // 隐藏下拉框 $("select").show(); // 显示下拉框 $("select").togg

可输入文字查找ajax下拉框控件 ComBox的实现方法

GooFunc.js文件 //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 function getElCoordinate(dom) { var t = dom.offsetTop; var l = dom.offsetLeft; dom=dom.offsetParent; while (dom) { t += dom.offsetTop; l += dom.offsetLeft; dom=dom.offsetParent; }; return { top: t, lef