2014年10月15日 星期三

jQuery Autocomplete - ASP.NET ashx datasource

 

1. autocomplete.aspx

2. handler1.ashx

Sample Code:

1. autocomplete.aspx:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - ASP.NET ASHX datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <style type="text/css">
    body {
       font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
       font-size: 62.5%;
    }
    .ui-autocomplete-loading {
       background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
  </style>
  <script type ="text/javascript" >
        $(function () {
            $("#txtInput").autocomplete({
                source: "handler1.ashx",
                minLength: 1,
                select: function (event, ui) {
                    alert(ui.item.value);
                },
                change: function(event, ui) { 
                    alert("changed!");
                }
            });
        });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="Sample">Your list: </label>
  <input id="txtInput">
</div>

‘-----------------------------------------------------

2. handler1.ashx:

Public Class Handler1
    Implements System.Web.IHttpHandler

    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

    'context.Response.ContentType = "text/plain"
    'context.Response.Write("Hello World!")
    'query string
    Dim prefixText As String = context.Request.QueryString("term")

    'suggestion list
    Dim v_ret As String = "[]"

    'TODO: SQL data searching...

    'Sample list:
    v_ret = "[{""id"":""A"",""label"":""AAA"",""value"":""AA""},
          {""id"":""B"",""label"":""BBB"",""value"":""BB""}]"

    context.Response.ContentType = "text/plain"
    context.Response.Write(v_ret)

    End Sub

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

‘---------------------------------------------------------

Ref: www.jqueryui.com