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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
微信小程序静默登录的实现代码
Jan 08 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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
flexigrid 参数说明
2010/11/23 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
vuex入门最详细整理
2020/03/04 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python读写csv文件实例代码
2019/07/05 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
python飞机大战游戏实例讲解
2020/12/04 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
物流业务员岗位职责
2014/02/08 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
植树节活动总结
2014/04/30 职场文书
2014年人事部工作总结
2014/12/03 职场文书
车间安全生产管理制度
2015/08/06 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
以下牛机,你有几个
2022/04/05 无线电