JQuery实现文本框自动补全(修改版)

最新推荐文章于 2017-03-21 10:26:00 发布

转载最新推荐文章于 2017-03-21 10:26:00 发布 · 2.4k 阅读

文章标签：

#jquery #function #stylesheet #string #border #xhtml

本文介绍如何使用JQuery和.NET实现文本框自动补全功能。通过客户端JavaScript处理用户输入，并通过AJAX请求从服务器获取建议。支持键盘导航及选择。

采用JQuery和.net中的一般处理程序实现文本框的自动补全，鼠标、键盘功能齐全

Html代码

<!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> <link href="css/test.css" mce_href="css/test.css" rel="stylesheet" type="text/css" /> <mce:script src="js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script> <mce:script src="js/test.js" mce_src="js/test.js" type="text/javascript"></mce:script> </head> <body> <div id="con"> 自动补全：<input id="txt1" type="text" CssClass ="txt1" onkeyup="findcon();"/> </div> <div id="popup"> <ul id="con_ul"></ul> </div> </body> </html>

test.js文件

test.css文件

body { font-family:Arial; font-size:14px; padding:0px; margin:10px; } .txt1 { /* 用户输入框的样式 */ width:200px; } #popup { /* 提示框div块的样式 */ position:absolute; left:80px; top:32px; width:204px; /*border:solid 1px black;*/ color:#004a7e; } #popup.show{ /* 显示提示框的边框 */ border:1px solid #004a7e; } ul{ list-style:none; margin:0px; padding:0px; color:#004a7e; } li.mouseOver{ background-color:#004a7e; color:#FFFFFF; }

test.ashx一般处理程序文件
<%@ WebHandler Language="C#" Class="test" %> using System; using System.Web; using System.Data; public class test : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string str=context.Request.QueryString["parms"]; if (str.Length == 0) { return; } string result = ""; string[] name = new string[] { "a","b","c","d","e","f","g","a2","b2","c2","d2","e2","f2","g2","a3","b3","c3","d3","e3","f3","g3","a4","b4","c4","d4","e24","f4","g4" }; for (int i = 0; i < name.Length; i++) { if (name[i].IndexOf(str) == 0) result += name[i] + ","; } if (result.Length > 0) //如果有匹配项 result = result.Substring(0, result.Length - 1); //去掉最后的“,”号 context.Response.Write(result); } public bool IsReusable { get { return false; } } }