Jquery autpComplete 

Handler
<%@ WebHandler Language="C#" Class="HandlerJson" %>

using System;
using System.Web;
using Newtonsoft.Json;
using System.Collections;
public class HandlerJson : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        IList list = new ArrayList();
        for (int i = 0; i < 5; i++)
        {
            Products pd = new Products();
            pd.name = "nekey"+i;
            pd.age = 12;
            list.Add(pd);
        }
       
        context.Response.Write(JavaScriptConvert.SerializeObject(list));
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    public class Products
    {
        public string name { get; set; }
        public int age { get; set; }
      
        
    }
   

}

页面

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="_Default" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>
    <script src="Scripts/Jqury1.5.js" language="javascript" type="text/javascript"></script>
    <script src="Scripts/autocomplete/jquery.bgiframe.min.js" type="text/javascript"></script>
    <script src="Scripts/autocomplete/jquery.ajaxQueue.js" type="text/javascript"></script>
    <script src="Scripts/autocomplete/thickbox-compressed.js" type="text/javascript"></script>
    <script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>

    <link href="Styles/main.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <link href="Styles/thickbox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $().ready(function () {

            var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];


            var cities = new Array();
            $.ajax({
                type: "post",
                url: "HandlerJson.ashx",
                data: "",
                dataType: "text",
                success: function (data) {

                    var jsonValue = eval("(" + data + ")");
                    $.each(jsonValue, function (i, t) {
                        cities[i] = t.name;
                    });


                }
            });

            function log(event, data, formatted) {
                $("<li>").html(!data ? "No match!" : "Selected: " + formatted).appendTo("#result");
            }

            function formatItem(row) {
                return row[0] + " (<strong>id: " + row[1] + "</strong>)";
            }
            function formatResult(row) {
                return row[0].replace(/(<.+?>)/gi, '');
            }

            $("#suggest1").focus().autocomplete(cities);
            $("#month").autocomplete(months, {
                minChars: 0,
                max: 12,
                autoFill: true,
                mustMatch: true,
                matchContains: false,
                scrollHeight: 220,
                formatItem: function (data, i, total) {
                    // don't show the current month in the list of values (for whatever reason)
                    if (data[0] == months[new Date().getMonth()])
                        return false;
                    return data[0];
                }
            });

        });

     

     
    </script>
</head>
<body>
    <div id="content">
        <form autocomplete="off"  action="">
        <p>
			<label>Single City (local):</label>
			<input type="text" id="suggest1" />
			

		</p>

        <p>
            <label>
                Month (local):</label>
            <input type="text" id="month" />
           
        </p>
        </form>
        </div>
</body>
</html>

posted on 2011-03-08 18:42  losty  阅读(242)  评论(0)    收藏  举报