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 相关文章推荐
javascript 自定义事件初探
Aug 21 Javascript
浅析js封装和作用域
Jul 09 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 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 前一天或后一天的日期
2008/06/28 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python通过yield实现数组全排列的方法
2015/03/18 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python实现两张图片的像素融合
2019/02/23 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python实现人像动漫化的示例代码
2020/05/17 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
参观邀请函范文
2015/02/02 职场文书
高校教师个人总结
2015/02/10 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
Java spring定时任务详解
2021/10/05 Java/Android