xieronghua246
- 浏览: 197616 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
mao_lu：
cor_ggsearch.init("中国,中国人民 ...
仿google搜索框下拉提示效果 -
aas7612：
， thanks very much
JPA映射文件jpa.reveng.xml的配置问题 -
ghbhaozi：
...
Ext MultiSelect实现双击删除
写道
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框提示列表效果</title>
<script type="text/javascript">
function showAndHide(obj,types)
{
var Layer=window.document.getElementById(obj);
switch(types)
{
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str)
{
var input=window.document.getElementById(obj);
input.value=str;
}
function ggonmouseover(obj)
{
obj.style.background="blue";
obj.style.color="white";
}
function ggonmouseout(obj)
{
obj.style.background="white";
obj.style.color="black";
}
function ggsearch()
{
var arr;
this.init=function(str)
{
arr=str.split(",");
}
this.search=function(key)
{
var resultArr=new Array();
for(var i=0;i<arr.length;i++)
{
if(arr[i].indexOf(key)!=-1)
{
resultArr.push(arr[i]);
}
}
return resultArr;
}
}
var cor_ggsearch=new ggsearch();
cor_ggsearch.init("中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民");
function search_cor(obj,div_name)
{
var key=obj.value;
if(key=="")
return false;
var likeArr=cor_ggsearch.search(key);
var ihtml='<div style="position: absolute;left:0;top:0;width:100%;height:auto;z-index:1;"><ul style="margin:3px;padding:0">';
var licss='width:100%;height:20px;line-height:20px;font-size:14px;border-bottom:1px dashed #ccc;';
if(likeArr.length!=0)
{
for(var i=0;i<likeArr.length;i++)
{
ihtml=ihtml+'<li style="'+licss+'" onmousedown=getValue("'+obj.name+'","'+likeArr[i]+'");showAndHide("'+div_name+'","hide"); onmouseover="ggonmouseover(this)" onmouseout="ggonmouseout(this)" >'+likeArr[i]+'</li>';
}
ihtml=ihtml+'</ul></div>';
document.getElementById(div_name).innerHTML=ihtml;
document.getElementById(div_name).style.width=obj.style.width;
showAndHide(div_name,'show');
}
}
</script>
</head>
<body>
受检单位：
<div><input type="text" id="txt" name="txt" style="width:180px" onpropertychange="search_cor(this,'cor_menu');" onblur="showAndHide('cor_menu','hide')" ></div>
<div name="cor_menu" id="cor_menu" onfocus="showAndHide(this.name,'show')" style="position:relative;overflow-y:auto;overflow-x:hidden;height:160px;z-index:1;background:#FFF;border:1px solid #000;SCROLLBAR-FACE-COLOR:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;SCROLLBAR-SHADOW-COLOR:#919192;SCROLLBAR-3DLIGHT-COLOR:#ffffff;SCROLLBAR-ARROW-COLOR:#919192;SCROLLBAR-TRACK-COLOR:#ffffff;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;LETTER-SPACING:1pt;display:none;">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框提示列表效果</title>
<script type="text/javascript">
function showAndHide(obj,types)
{
var Layer=window.document.getElementById(obj);
switch(types)
{
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str)
{
var input=window.document.getElementById(obj);
input.value=str;
}
function ggonmouseover(obj)
{
obj.style.background="blue";
obj.style.color="white";
}
function ggonmouseout(obj)
{
obj.style.background="white";
obj.style.color="black";
}
function ggsearch()
{
var arr;
this.init=function(str)
{
arr=str.split(",");
}
this.search=function(key)
{
var resultArr=new Array();
for(var i=0;i<arr.length;i++)
{
if(arr[i].indexOf(key)!=-1)
{
resultArr.push(arr[i]);
}
}
return resultArr;
}
}
var cor_ggsearch=new ggsearch();
cor_ggsearch.init("中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民");
function search_cor(obj,div_name)
{
var key=obj.value;
if(key=="")
return false;
var likeArr=cor_ggsearch.search(key);
var ihtml='<div style="position: absolute;left:0;top:0;width:100%;height:auto;z-index:1;"><ul style="margin:3px;padding:0">';
var licss='width:100%;height:20px;line-height:20px;font-size:14px;border-bottom:1px dashed #ccc;';
if(likeArr.length!=0)
{
for(var i=0;i<likeArr.length;i++)
{
ihtml=ihtml+'<li style="'+licss+'" onmousedown=getValue("'+obj.name+'","'+likeArr[i]+'");showAndHide("'+div_name+'","hide"); onmouseover="ggonmouseover(this)" onmouseout="ggonmouseout(this)" >'+likeArr[i]+'</li>';
}
ihtml=ihtml+'</ul></div>';
document.getElementById(div_name).innerHTML=ihtml;
document.getElementById(div_name).style.width=obj.style.width;
showAndHide(div_name,'show');
}
}
</script>
</head>
<body>
受检单位：
<div><input type="text" id="txt" name="txt" style="width:180px" onpropertychange="search_cor(this,'cor_menu');" onblur="showAndHide('cor_menu','hide')" ></div>
<div name="cor_menu" id="cor_menu" onfocus="showAndHide(this.name,'show')" style="position:relative;overflow-y:auto;overflow-x:hidden;height:160px;z-index:1;background:#FFF;border:1px solid #000;SCROLLBAR-FACE-COLOR:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;SCROLLBAR-SHADOW-COLOR:#919192;SCROLLBAR-3DLIGHT-COLOR:#ffffff;SCROLLBAR-ARROW-COLOR:#919192;SCROLLBAR-TRACK-COLOR:#ffffff;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;LETTER-SPACING:1pt;display:none;">
</div>
</body>
</html>
分享到：
评论
1 楼
mao_lu
2012-12-27
cor_ggsearch.init("中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民");
这里我需要加的特别多,加完后发出很慢,怎么能优化一下?
这里我需要加的特别多,加完后发出很慢,怎么能优化一下?
发表评论
-
Ext获取editor, 使用grid.getSelectionModel().getCellEditor方法
2011-07-11 11:32 22741.{..., 2. renderer:func ... -
Ext MultiSelect实现双击删除
2011-03-24 15:51 1672listeners :{dblclick:function( ... -
javascript 事件传递 的参数
2010-12-25 22:01 802for(var i=1;i<this.cfg.num+1 ... -
解决iframe中jsessionid无法传递导致session丢失的问题
2010-12-23 00:43 1810在实现 ISMP2.1.1 接口的适合需要用到sso，而ISM ... -
郁闷的Iframe
2010-12-17 03:21 767没有想到两点： 1.设置 width="100%& ... -
在JavaScript中实现命名空间
2010-11-19 12:25 742在引入命名空间之前 ... -
JS读取图片属性的代码
2010-10-28 09:40 1639<title> 文件上传前台控制检测程序 v0. ... -
JavaScirpt巧妙获取File对象中的文件大小
2010-10-28 09:34 911function getFileSize(fileObject ... -
获取控件在网页中的绝对位置
2010-10-13 12:20 747获取控件在网页中的绝对位置 <!DOCTYPE htm ... -
用Javascript实现静态对象、静态方法和静态属性
2010-08-29 02:34 1065Javascript语言的面向对象特征很弱，其他面向对象语言在 ... -
Json数据常见写法
2010-07-26 16:39 1485<script> //var a={' ... -
Ajax 同步和异步问题
2009-12-02 03:22 815写道 function getHTTPObject() { ... -
如何解决ie8与ie7兼容性问题
2009-09-15 15:48 1858怎么样让IE7兼容IE8,解决ie8与ie7兼容性问题方法一、 ... -
Javascript 学习笔记一
2009-06-22 15:28 670Javascript 按段执行代码，如果要调用另外一段的方法， ... -
网页上框选复选框
2009-06-20 02:08 881<!DOCTYPE HTML PUBLIC " ... -
检测浏览器各类尺寸的页面
2009-06-08 17:26 906<!DOCTYPE HTML PUBLIC " ... -
Cookie的跨域操作
2009-06-08 17:25 878正常的cookie只能在一个应用中共享，即一个cookie只能 ... -
网页代码优化专题
2009-06-08 17:24 988优化中最危险的动作可能是重命名类或ID值了。看看如下规则： ... -
Javascript学习笔记
2009-06-08 17:23 645字号：大 中 小 ... -
Javascript代码优化
2009-06-08 17:22 811字号：大 中 小 如何优化JavaScrip ...
相关推荐
这个项目“用php+ajax写的仿百度谷歌搜索下拉自动提示框效果”旨在实现类似百度和谷歌搜索引擎的实时搜索建议功能。下面我们将详细探讨这个过程涉及的关键知识点。 首先，我们要理解**PHP**（Hypertext ...
"仿Google提示框"和"下拉提示框"就是一种常见的UI设计元素，广泛应用于搜索引擎、输入法和其他需要提供智能建议的应用场景。这些提示框的设计灵感通常来源于Google的搜索框，它能在用户输入时提供即时的下拉建议，...
标题中的“仿谷歌搜索可键盘下拉提示”指的是在网页搜索框中实现类似谷歌搜索引擎的自动补全功能，也就是当用户在输入关键字时，搜索框会根据已输入的部分文字给出可能的搜索建议，以帮助用户快速找到他们可能感兴趣...
模仿谷歌搜索框中输入下拉提示(自动补全)功能，访问数据库调去数据，内有数据库SQL文件，数据库JDBC连接方式,记得填写正确的username="" password="" 在tomcat 的lib文件夹中 中导入mysql 驱动包【mysql包文件夹中有...
### 仿GOOGLE下拉提示框方法解析 在现代网页应用开发中，提供实时搜索建议是一种常见的用户体验增强技术。本文将详细介绍如何实现一种类似于Google下拉提示框的功能，该功能可以基于用户输入实时显示可能的匹配项。...
在本项目“QCombox自动提示，仿谷歌搜索功能”中，我们将看到如何结合`QComboBox`和`QListWidget`来实现这样的效果。 首先，我们要理解`QComboBox`的基本用法。它有两个主要的组成部分：一个可编辑的文本框和一个...
标题中的“仿照百度,google的输入框提示下拉列表”指的是实现类似百度和Google搜索引擎在用户输入关键词时，自动下拉显示出与输入内容相关的搜索建议功能。这种功能在网页开发中常见，能够提高用户体验，让用户快速...
标题中的“仿百度 谷歌下拉提示 纯jquery 实现”指的是利用JavaScript库jQuery来创建一种功能，该功能模拟了百度和谷歌搜索引擎在用户输入时显示下拉建议的效果。这种效果能够提高用户体验，因为用户无需完整输入...
而实现QComboBox输入自动提示功能，可以极大地提升用户体验，类似于Google搜索框的自动完成效果。这个功能在开发过程中常用于减少用户的输入负担，提高数据选择的效率。本篇将详细介绍如何在C++中使用Qt库来实现这一...
JSP 搜索框下拉提示实例代码，配合有数据库，Access，利用JSP读取数据库，Ajax调用并返回给...点击文本框出现下拉提示，输入的时候会自动匹配搜索关键字，目前百度、Google、360等主流浏览器都具备搜索框智能提示功能。
在这个项目中，我们讨论的是如何使用Ajax来实现一个类似于Google搜索框的下拉提示功能。 在Google的搜索框中，当用户开始输入时，会弹出一个下拉菜单，显示与输入内容相关的搜索建议。这种功能可以提供快速导航、...
本文将详细解析如何通过JavaScript来实现类似Google搜索框的下拉提示功能，并提供一段简化的示例代码。 #### 二、基础知识概述 在深入了解实现细节之前，我们先了解一些必要的基础知识： 1. **HTML基础**：HTML是...
本项目“仿google搜索提示效果和省市二级联动”旨在模仿Google搜索引擎的实时搜索建议功能，并结合中国省市的二级联动选择，为用户提供更加智能化的交互体验。下面我们将深入探讨这一项目的实现原理和涉及的技术栈。...
在这个项目中，JavaScript可能被用来实现搜索框的实时查询功能，当用户输入关键词时，页面能立即响应并显示相关提示。此外，JavaScript还可以处理用户的点击事件，如导航链接的跳转，以及可能存在的下拉菜单或滑动...
2. **JavaScript** 是前端开发的关键语言，用于处理用户的输入事件，如keyup或keydown，当检测到用户在搜索框中输入时，触发AJAX请求。同时，JavaScript还负责接收服务器返回的数据，并动态地在下拉框中显示这些建议...
"仿GG的输入框下拉提示功能"就是一种常见的交互设计，它模仿了谷歌（Google）搜索框的自动补全功能，能够根据用户的输入实时显示相关建议，极大地提高了输入效率。本项目采用Ajax技术和JSP（JavaServer Pages）来...
本文将深入探讨如何利用J2EE技术来实现一个仿Google和百度的搜索下拉提示功能，支持中文，并结合MySQL数据库。 首先，搜索下拉提示是Web应用中常见的功能，它提升了用户的输入体验，通过实时检索用户输入的关键字，...
标题中的“仿baidu,google出现下拉菜单”指的是在网页搜索框中实现类似百度和谷歌的自动补全功能，即用户在输入关键词时，系统会根据已输入的部分字符预测可能的完整搜索词，并在下拉菜单中显示这些推荐选项。...
3. **HTML**：构建网页结构，包括搜索框和隐藏的下拉层。 4. **Oracle数据库**：存储待搜索的数据，通过SQL查询匹配用户输入的关键词。 ### 三、实现步骤 1. **创建HTML结构**：在页面上设置一个输入框和一个隐藏...