学习AJAX--用JQuery实现文本框自动完成

来源：互联网发布：game of life 算法编辑：程序博客网时间：2024/05/17 08:11

文本框自动完成功能主要实现当在文本框中输入一定长度的字符后，能自动从服务器中获取与之匹配的所有数据，列表供用户选择。
本事例采用sql数据库，当用户在文本框中输入字符时，自动从数据库中取出与之匹配的其它单词，供用户选择，使用JQery实现。

代码如下：

客户端：

<!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>    <title></title>    <script src="js/jquery-1.7.js" type="text/javascript"></script>    <script type="text/javascript">        $(function() {            $("#Text1").keyup(function() {                $("#autodiv").attr("style", "display:block");                $.post("autocomplete.ashx", { "key": $(this).val() }, function(data, status) {                    if (status = "success") {                        var items = $.parseJSON(data);                        $("#autoList").empty();                        for (var k = 0; k < items.length; k++) {                            var li = $("<li>" + items[k] + "</li>");                            $("#autoList").append(li);                        }                        $("#autoList li").click(function(e) {                            $("#Text1").val($(this).text());                            $("#autodiv").attr("style", "display:none");                        });                    }                });            });        });    </script></head><body><input id="Text1" type="text" /><div id="autodiv"><ul id="autoList"></ul></div></body></html>

处理程序：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Web.Script.Serialization;using AJAXTest.DataSetTopicTableAdapters;namespace AJAXTest{    /// <summary>    /// $codebehindclassname$ 的摘要说明    /// </summary>    [WebService(Namespace = "http://tempuri.org/")]    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]    public class autocomplete : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            string key = context.Request["key"];            List<string> list = new List<string>();            var adapter = new autocompleteTableAdapter();            var t = adapter.GetDataBy(key);            foreach (var row in t)            {                list.Add(row.Description.Trim());            }            JavaScriptSerializer jss = new JavaScriptSerializer();            context.Response.Write(jss.Serialize(list));        }        public bool IsReusable        {            get            {                return false;            }        }    }}