jQuery TextBox自动完成条_Javascript教程-查字典教程网
jQuery TextBox自动完成条
jQuery TextBox自动完成条
发布时间:2016-12-30 来源:查字典编辑
摘要:代码如下:复制代码代码如下:无标题页.mouseEnter{background-color:Yellow;}Ajax调用的一般处理程序为:...

代码如下:

复制代码 代码如下:

<%@ 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"><></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"><></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">

<table>

<tbody id="mytable">

</tbody>

</table>

</div>

</form>

<script type="text/javascript"><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#" %>

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文档内容都是随机产生的:所以下面的效果显示的结果都是随机生成的;不说了。来个图例:

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类