jQuery TextBox自动完成条


Posted in Javascript onJuly 22, 2009

代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!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> 
<style type="text/css"><!-- 
.mouseEnter 
{ 
background-color: Yellow; 
} 
--></style><style type="text/css" bogus="1"> .mouseEnter 
{ 
background-color: Yellow; 
} 
</style> 
<script type="text/javascript" src="SCRIPT/jquery-1.3.2-vsdoc2.js" src="SCRIPT/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript"><!-- 
$(function(){ 
$("#result").css("position","absolute"); 
var offset =$("#TextBox1").offset(); 
$("#result").css({left: offset.left +"px",top: offset.top + $("#TextBox1").height() + "px"}); 
}); 
// --></script> 
</head> 
<body > 
<form id="form1" runat="server" onsubmit="alert($('#TextBox1').val());"> 
<center><asp:TextBox ID="TextBox1" runat="server" width="137px" ></asp:TextBox></center> 
<div id="result" style="width: 147px;"> 
<table style="width: 100%; border-style: none solid solid solid; border-width: 1px; 
border-color: #00FF00"> 
<tbody id="mytable"> 
</tbody> 
</table> 
 </div> 
</form> 
<script type="text/javascript"><!-- 
var size = 0; //每次真实取到的数据条目数(最大10) 
var index = -1 ;//计算keydown事件:td索引; 
function setTdEvent(){//为生成的TD设置事件 
//点击效果 
$("#mytable>tr>td").click(function(){ 
$("#TextBox1").val($(this).text()); 
}); 
//选择高亮效果 
$("#mytable>tr >td").hover(function(){ 
$(this).addClass("mouseEnter"); 
},function(){ 
$(this).removeClass("mouseEnter"); 
}); 
} 

function setTD(text){ 
//$("tr:even").css("backgroundColor","blue"); 
return "<tr><td style='border: 0px none #FFFFFF;width:100%'>" + text + "</td></tr>"; 
} 
function setTable(msg) 
{ 
var tbody = $("#mytable"); 
var texts = msg.split(";"); 
var str =""; 
size = texts.length; 
for(var i=0;i<texts.length;i++) 
{ 
str += setTD(texts[i]); 
} 
tbody.html(str); 
setTdEvent() 
$("#div1").show("fast"); 
} 
function setKeyDown(str) 
{ 
$("#mytable>tr>td:eq(" + index + ")").removeClass("mouseEnter"); 
if(str == "+") 
{ 
index = (++index) % size; 
} 
else if("-") 
{ 
index =(--index + size) % size; 
} 
try{ 
$("#mytable>tr>td:eq(" + index + ")").addClass("mouseEnter"); 
}catch(e){ 
alert(e); 
} 
} 
$(function(){ 
$("#TextBox1").bind("propertychange",function(){ 
$("#div1").hide("fast").html(""); 
index = -1; 
$.ajax({ 
type: "POST", 
url: "Suggest.ashx", 
data: "word="+$("#TextBox1").val()+"&time="+new Date().toLocaleTimeString(), 
success: function(msg){ 
setTable( msg ); 
} 
}); 
}); 
$("#TextBox1").bind("keydown",function(event){ 
if( event.keyCode == 38 ) 
{ 
setKeyDown("-"); 
} 
else if(event.keyCode == 40) 
{ 
setKeyDown("+"); 
} 
else if(event.keyCode == 13 && index != -1) 
{ 
$("#TextBox1").val( $("#mytable>tr>td:eq(" + index + ")").text()); 
} 
}); 
}); 
// --></script> 
</body> 
</html>

Ajax调用的一般处理程序为:
<%@ WebHandler Language="C#" Class="Suggest" %> using System; 
using System.Web; 
using System.Linq; 
using System.Xml; 
using System.Xml.Linq; 
public class Suggest : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
HttpResponse Response = context.Response; 
Response.Charset = "gb2312"; 
Response.ContentEncoding = System.Text.Encoding.UTF8; 
Response.ContentType = "text/plain"; 
Response.StatusCode = 200; 
string start = context.Request.Params["word"].ToString(); 
Response.Write(GetSuggest(start)); 
Response.Flush(); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
/// <summary> 
/// 获取响应字符串 
/// </summary> 
/// <param name="start">查询起始字符串</param> 
/// <returns>响应字符串</returns> 
private string GetSuggest(string start) 
{ 
XElement root = XElement.Load(AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "Suggest.xml"); 
System.Collections.Generic.IEnumerable<string> 
q = (from r in root.Elements() 
where (r.Name).ToString().ToLower().StartsWith(start.ToLower()) 
select r.Name.ToString()).Take(5); 
System.Text.StringBuilder sb = new System.Text.StringBuilder(); 
foreach (string w in q) 
{ 
sb.Append(w + ";"); 
} 
if (sb.Length != 0) 
sb.Remove(sb.Length - 1, 1); 
return sb.ToString(); 
} 
}

其中xml文档其实也不是什么标准的xml文档,就是拿来存储数据,练习练习刚学的Linq to XML。由于不想建表,本人也许有点懒惰吧,xml文档内容都是随机产生的:所以下面的效果显示的结果都是随机生成的;不说了。来个图例:
jQuery TextBox自动完成条
Javascript 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
JavaScript 动态生成方法的例子
Jul 22 #Javascript
模仿jQuery each函数的链式调用
Jul 22 #Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 #Javascript
javascript Base类 包含基本的方法
Jul 22 #Javascript
javascript 表单规则集合对象
Jul 21 #Javascript
一个可以随意添加多个序列的tag函数
Jul 21 #Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 #Javascript
You might like
php 多个submit提交表单 处理方法
2009/07/07 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
Yii分页用法实例详解
2014/12/04 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
js实现复制功能(多种方法集合)
2018/01/06 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
安全保证书范文
2014/04/29 职场文书
青春无悔演讲稿
2014/05/08 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
信访维稳承诺书
2015/05/04 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Android自定义双向滑动控件
2022/04/19 Java/Android
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python