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