BaoYaEr
模仿google提示性输入搜索
听一网友问怎么做一个像Google搜索一样,写入搜索关键字就提示相关信息。前两天有点时间,就想自己去做做看,现在完成了提示的功能。代码如下:
HTML代码:
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
AjaxTextBox.aspx.cs
"
Inherits
=
"
AjaxTextBox
"
%>
<!
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
>
AjaxTextBox
</
title
>
<
script
type
="text/javascript"
src
="mootools-release-1.11.js"
></
script
>
<
script
type
="text/javascript"
>
var
values;
window.addEvent(
"
domready
"
,
function
()
{
$(
"
ajaxtextbox
"
).addEvent(
"
keypress
"
,
function
(e)
{
var
keychar;
var
keynum;
if
(window.event)
//
IE
{
if
(window.event.keyCode
==
8
)
{
//
判断Backspace键
values
=
values.substr(
0
,values.length
-
1
);
$(
"
ajaxtextbox
"
).value
=
values;
}
keynum
=
window.event.keyCode;
}
else
if
(e.which)
//
Netscape/Firefox/Opera
{
if
(e.which
==
8
)
{
values
=
values.substr(
0
,values.length
-
1
);
$(
"
ajaxtextbox
"
).value
=
values;
}
keynum
=
e.which;
}
keychar
=
String.fromCharCode(keynum);
if
(
/^
[a
-
zA
-
Z0
-
9_\u4e00
-
\u9fa5]
+
$
/
.test(keychar))
{
//
判断是不是中文,英文,数字
$(
"
ajaxtextbox
"
).value
+=
keychar;
values
=
$(
"
ajaxtextbox
"
).value;
}
if
($(
"
ajaxtextbox
"
).value
==
""
)
{
return
;
}
var
url
=
"
AjaxTextBox.aspx?value=
"
+
$(
"
ajaxtextbox
"
).value;
new
Ajax(url,
{method:'post',
onComplete:
function
()
{
$(
"
msg
"
).innerHTML
=
this
.response.text;
if
($(
"
ajaxtextbox
"
).value.length
>
values.length)
{
$(
"
ajaxtextbox
"
).value
=
values;
}
}
}
).request();
}
);
}
);
function
getMsg(obj)
{
$(
"
ajaxtextbox
"
).value
=
obj.innerHTML;
$(
"
msg
"
).innerHTML
=
""
;
}
</
script
>
</
head
>
<
body
>
<
input
type
="text"
id
="ajaxtextbox"
name
="ajaxtextbox"
style
="width:170px;"
runat
="server"
/>
<
div
id
="msg"
style
="width:170px;"
></
div
>
</
body
>
</
html
>
cs代码
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
public
partial
class
AjaxTextBox : System.Web.UI.Page
{
public
static
DataTable dt
=
new
DataTable();
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(
!
IsPostBack)
{
if
(dt.Rows.Count
==
0
)
{
dt.Columns.Add(
"
cotents
"
);
DataRow dr
=
dt.NewRow();
dr[
0
]
=
"
0a2b3c
"
;
DataRow dr1
=
dt.NewRow();
dr1[
0
]
=
"
0e2f3g
"
;
dt.Rows.Add(dr);
dt.Rows.Add(dr1);
}
}
if
(
!
String.IsNullOrEmpty(Request[
"
value
"
]))
{
Seach(Request[
"
value
"
]);
}
}
protected
void
Seach(
string
value)
{
string
seach
=
"
<div style=\
"
width:170px; background
-
color:InfoBackground;\
"
;>
"
;
for
(
int
i
=
0
; i
<
dt.Rows.Count; i
++
)
{
if
(dt.Rows[i][
"
cotents
"
].ToString().StartsWith(value.Trim()))
{
seach
+=
"
<div style=\
"
width:170px; cursor:pointer;\
"
onclick=\
"
getMsg(
this
)\
"
>
"
+
dt.Rows[i][
"
cotents
"
].ToString()
+
"
</div>
"
;
}
}
seach
+=
"
</div>
"
;
Response.Clear();
Response.Write(seach);
Response.End();
}
}
发表于 2008-04-23 16:42
大田斗
阅读(431)
评论(1)
编辑
收藏
所属分类:
html/js/css
评论
#
re: 模仿google提示性输入搜索
你没有给mootools-release-1.11.js 看不出效果 啊
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
深入浅出之正则表达式【zt】
ExtJs2.0学习系列(8)--Ext.XTemplate
ExtJs2.0学习系列(7)--Ext.TabPanel
ExtJs2.0学习系列(6)--Ext.FormPanel之第五式(综合篇)
ExtJs2.0学习系列(5)--Ext.FormPanel
ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
ExtJs2.0学习系列(3)--Ext.Window
ExtJs2.0学习系列(2)--Ext.Panel
ExtJs2.0学习系列(1)--Ext.MessageBox
Ext.extend学习
<
2024年11月
>
日
一
二
三
四
五
六
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
导航
BlogJava
首页
发新随笔
发新文章
联系
聚合
管理
统计
随笔: 32
文章: 427
评论: 144
引用: 0
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(5)
给我留言
查看公开留言
查看私人留言
随笔档案
2008年12月 (1)
2008年4月 (2)
2008年2月 (1)
2008年1月 (1)
2007年12月 (3)
2007年11月 (1)
2007年10月 (3)
2007年7月 (2)
2007年6月 (1)
2007年4月 (2)
2007年3月 (3)
2007年2月 (5)
2007年1月 (3)
2006年12月 (4)
文章分类
axis(6)
(rss)
eclipse(7)
(rss)
Hibernate(30)
(rss)
html/js/css(107)
(rss)
java(106)
(rss)
linux(7)
(rss)
Lucene(7)
(rss)
spring(36)
(rss)
Spring CLOUd(1)
(rss)
Strtus(30)
(rss)
其它(48)
(rss)
开源opensource(48)
(rss)
数据库DateBase(30)
(rss)
设计模式(12)
(rss)
文章档案
2018年8月 (1)
2012年5月 (1)
2012年4月 (2)
2011年7月 (6)
2010年3月 (1)
2010年2月 (1)
2010年1月 (3)
2009年12月 (1)
2009年10月 (1)
2009年8月 (3)
2009年3月 (1)
2009年2月 (1)
2008年12月 (3)
2008年11月 (10)
2008年10月 (3)
2008年9月 (2)
2008年8月 (2)
2008年7月 (4)
2008年6月 (13)
2008年5月 (15)
2008年4月 (9)
2008年3月 (10)
2008年1月 (18)
2007年12月 (33)
2007年11月 (6)
2007年10月 (18)
2007年9月 (10)
2007年8月 (18)
2007年7月 (15)
2007年6月 (25)
2007年5月 (19)
2007年4月 (26)
2007年3月 (38)
2007年2月 (33)
2007年1月 (27)
2006年12月 (27)
2006年11月 (12)
java
Ajax特效网站
cndiy nio
GRO
Hani Suleiman's blog
Java之路
java论坛
J道
mule
mule 入门
oksonic(动画教程)
一路由你
中国eclipse
八进制
在线源码
多线程实战
天火
小米的blogjava
幻境伯克----jface/swt
很全的博克-强
每日一得
满江红
邢红瑞
飞翔
鸟诗选(js)
鸟食轩 (dhtml)
工具
apache中文手册
extjs学习
iconFindre
java 安全
javaresearch
java技巧网
js之王
matrix(study)
prototype api
spring中文
北京IT企业速查
在线流程图工具
雅虎翻译
朋友
Happyshow
hibernate异常
skywalker
sunshow
xf
亚光
同云博客
小弟鹏
张玉磊
昕
李阳
黄鸣
搜索
积分与排名
积分 - 1098440
排名 - 28
最新评论
1. re: hibernate.cfg.xml配置
好全啊 .. 棒棒哒 ~ !
--junqinag.yang
2. re: Quartz任务调度快速入门
我现在来看还是觉得不错
--小任
3. re: js中this的总结
评论内容较长,点击标题查看
--pam
4. re: Quartz任务调度快速入门
楼主辛苦
--yd
5. re: Quartz任务调度快速入门
顶了,内容写的很好
--sen
阅读排行榜
1. 网页不缓存(3536)
2. Form嵌套引起的问题 (2830)
3. 解决IE下CSS背景图片闪烁的Bug(2432)
4. Spring AOP的动态载入原理(2394)
5. 如何制作漂亮的Excel表格(2022)
评论排行榜
1. 北京户口--吃官司(5)
2. 开始→运行→输入的命令集锦(3)
3. 让网页上的所有图片动起来(2)
4. Dom4j 编码问题彻底解决 (1)
5. 心情不爽(1)