jquery ui 중에 autocomplete 에 대한 상세 내용은 아래 경로를 참고해 주세요.
tags 의 input 입력 란에 값을 입력하게 되면 autocompelte 함수가 해당 dom 움직직임을 감지하여 이를 해당 autocomplete.ashx 핸들러에 입력값을 전송합니다.
<!DOCTYPE
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Auto complete demo</title>
<script type="text/xxjavascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/xxjavascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/xxjavascript">
$(document).ready(function
()
{
$("#tags").autocomplete({source:
'/Autocomplete.ashx'});
});
</script>
</head>
<body>
<input type="text" id="tags" />
</body>
</html>
여기서 자세히 볼 부분은 사용자가 입력한 값을 어떻게 가져오는지 확인하시면 되는데요.
context.Request.QueryString["term"] 와 같이 사용자가 입력한 값을 get 방식으로 전송하여 이를 얻을 수 있습니다.
데이터는 string 배열에 담아서 이를 자바스크립트 배열로 반환하기 위해서 xxJavaScriptSerializer().Serialize() 메소드를 사용해야
하며, 이는 using System.Web.Script.Serialization; 을 지정한 후 사용이 가능합니다.
<%@ WebHandler Language="C#" Class="Autocomplete" %>
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Script.Serialization;
using System.Linq;
public class Autocomplete : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType
= "application/xxxxjavascript";
string cnString = ConfigurationManager.ConnectionStrings["test"].ConnectionString;
string
sql = "SELECT Firstname + ' ' + Lastname as NAME from Employees where Lastname
like @term+ '%'";
SqlCommand cmd = new SqlCommand(sql, new SqlConnection(cnString));
cmd.CommandType=
CommandType.Text;
cmd.Parameters.AddWithValue("@term", context.Request.QueryString["term"]);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable
dt = new DataTable();
da.Fill(dt);
string[] items = new string[dt.Rows.Count];
int ctr = 0;
foreach
(DataRow row in dt.Rows)
{
items[ctr]
= (string) row["NAME"] ;
ctr++;
}
context.Response.Write(new xxJavaScriptSerializer().Serialize(items));
}
public bool IsReusable
{
get
{
return false;
}
}
}
그리고 위의 jquery ui 의 autocomplete 예제가 아닌 다른 방법에 대한 소스는 첨부해 드리오니 참고해 보시기 바랍니다.
ajaxautocomplete.zip감사합니다.