<![CDATA[
<p><br></p><p><br></p><p>jquery ui 중에 autocomplete 에 대한 상세 내용은 아래 경로를 참고해 주세요.</p><p><br></p><div style="border-style: dashed; border-width: 1px; border-color: rgb(193, 193, 193); background-color: rgb(238, 238, 238); padding: 10px;" class="txc-textbox"><p><a class="tx-link" target="_blank" href="http://jqueryui.com/demos/autocomplete/">http://jqueryui.com/demos/autocomplete/</a><br></p></div><p><br></p><p><br></p><p>tags 의 input 입력 란에 값을 입력하게 되면 autocompelte 함수가 해당 dom 움직직임을 감지하여 이를 해당 autocomplete.ashx 핸들러에 입력값을 전송합니다. </p><p><br></p><p><br></p><p><br></p><div style="border-style: dashed; border-width: 1px; border-color: rgb(243, 197, 52); background-color: rgb(254, 254, 184); padding: 10px;" class="txc-textbox"><p><!DOCTYPE
html><br>
<br>
<span style="color:Blue;"><</span><span style="color:#b40000;">html</span><span style="color:Blue;"> </span><span style="color:Red;">xmlns</span><span style="color:Blue;">="http://www.w3.org/1999/xhtml"></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">head</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">title</span><span style="color:Blue;">></span>Auto complete demo<span style="color:Blue;"></</span><span style="color:#b40000;">title</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">script</span><span style="color:Blue;"> </span><span style="color:Red;">type</span><span style="color:Blue;">="text/xxjavascript" </span><span style="color:Red;">src</span><span style="color:Blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></span><span style="color:Blue;"></</span><span style="color:#b40000;">script</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">script</span><span style="color:Blue;"> </span><span style="color:Red;">type</span><span style="color:Blue;">="text/xxjavascript" </span><span style="color:Red;">src</span><span style="color:Blue;">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></span><span style="color:Blue;"></</span><span style="color:#b40000;">script</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">link</span><span style="color:Blue;"> </span><span style="color:Red;">href</span><span style="color:Blue;">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"
</span><span style="color:Red;">rel</span><span style="color:Blue;">="stylesheet" </span><span style="color:Red;">type</span><span style="color:Blue;">="text/css" /></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">script</span><span style="color:Blue;"> </span><span style="color:Red;">type</span><span style="color:Blue;">="text/xxjavascript"></span><br>
$(document).ready(function
()<br>
{<br>
$("#tags").autocomplete({source:
'/Autocomplete.ashx'});<br>
});<br>
<span style="color:Blue;"></</span><span style="color:#b40000;">script</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"></</span><span style="color:#b40000;">head</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">body</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"><</span><span style="color:#b40000;">input</span><span style="color:Blue;"> </span><span style="color:Red;">type</span><span style="color:Blue;">="text" </span><span style="color:Red;">id</span><span style="color:Blue;">="tags" /></span><br>
<span style="color:Blue;"></</span><span style="color:#b40000;">body</span><span style="color:Blue;">></span><br>
<span style="color:Blue;"></</span><span style="color:#b40000;">html</span><span style="color:Blue;">></span></p></div><p><br></p><p><br></p><p>여기서 자세히 볼 부분은 사용자가 입력한 값을 어떻게 가져오는지 확인하시면 되는데요.</p><p> context.Request.QueryString[<span style="color:Purple;">"term"</span>] 와 같이 사용자가 입력한 값을 get 방식으로 전송하여 이를 얻을 수 있습니다.</p><p><br></p><p>데이터는 string 배열에 담아서 이를 자바스크립트 배열로 반환하기 위해서 <span style="font-weight: bold;">xxJavaScriptSerializer().Serialize()</span> 메소드를 사용해야</p><p>하며, 이는 <span style="color: Blue; font-weight: bold;">using</span><span style="font-weight: bold;"> System.Web.Script.Serialization;</span> 을 지정한 후 사용이 가능합니다.<br></p><p><br></p><div style="border-style: dashed; border-width: 1px; border-color: rgb(193, 193, 193); background-color: rgb(238, 238, 238); padding: 10px;" class="txc-textbox"><p><%@ WebHandler Language=<span style="color:Purple;">"C#"</span> <span style="color:Blue;">Class</span>=<span style="color:Purple;">"Autocomplete"</span> %><br>
<span style="color:Blue;">using</span> System;<br>
<span style="color:Blue;">using</span> System.Configuration;<br>
<span style="color:Blue;">using</span> System.Data;<br>
<span style="color:Blue;">using</span> System.Data.SqlClient;<br>
<span style="color:Blue;">using</span> System.Web;<br>
<span style="color:Blue;">using</span> System.Web.Script.Serialization;<br>
<span style="color:Blue;">using</span> System.Linq;<br>
<br>
<span style="color:Blue;">public</span> <span style="color:Blue;">class</span> Autocomplete : IHttpHandler<br>
{<br>
<span style="color:Blue;">public</span> <span style="color:Blue;">void</span> ProcessRequest(HttpContext context)<br>
{<br>
context.Response.ContentType
= <span style="color:Purple;">"application/xxxxjavascript"</span>;<br>
string cnString = ConfigurationManager.ConnectionStrings[<span style="color:Purple;">"test"</span>].ConnectionString;<br>
string
sql = <span style="color:Purple;">"SELECT Firstname + ' ' + Lastname as NAME from Employees where Lastname
like @term+ '%'"</span>;<br>
SqlCommand cmd = <span style="color:Blue;">new</span> SqlCommand(sql, <span style="color:Blue;">new</span> SqlConnection(cnString));<br>
cmd.CommandType=
CommandType.Text;<br>
cmd.Parameters.AddWithValue(<span style="color:Purple;">"@term"</span>, context.Request.QueryString[<span style="color:Purple;">"term"</span>]);<br>
SqlDataAdapter da = <span style="color:Blue;">new</span> SqlDataAdapter(cmd);<br>
DataTable
dt = <span style="color:Blue;">new</span> DataTable();<br>
da.<span style="color:#2b91af;">Fill</span>(dt);<br>
string[] items = <span style="color:Blue;">new</span> string[dt.Rows.<span style="color:#2b91af;">Count</span>];<br>
int ctr = 0;<br>
foreach
(DataRow row <span style="color:Blue;">in</span> dt.Rows)<br>
{<br>
items[ctr]
= (string) row[<span style="color:Purple;">"NAME"</span>] ;<br>
ctr++;<br>
}<br>
<br>
context.Response.<span style="color:#2b91af;">Write</span>(<span style="color:Blue;">new</span> xxJavaScriptSerializer().Serialize(items));<br>
}<br>
<br>
<span style="color:Blue;">public</span> bool IsReusable<br>
{<br>
get<br>
{<br>
<span style="color:Blue;">return</span> <span style="color:Blue;">false</span>;<br>
}<br>
}<br>
}<br></p></div><p><br></p><p><br></p><p>그리고 위의 jquery ui 의 autocomplete 예제가 아닌 다른 방법에 대한 소스는 첨부해 드리오니 참고해 보시기 바랍니다.</p><p><br></p><p><br></p><p><a href="javascript:checkVirus('grpid%3D8C6Q%26fldid%3DO57m%26dataid%3D87%26fileid%3D1%26regdt%3D20111218231032&url=http%3A%2F%2Fcfile295.uf.daum.net%2Fattach%2F170AE4404EEDF6AB2171C4')"><img src="https://t1.daumcdn.net/daumtop_deco/icon/icon.hanmail.net/editor/p_zip_s.gif?rv=1.0.1" border="0" alt="첨부파일" class="vam"/> ajaxautocomplete.zip</a></p><p><br></p><p><br></p><p>감사합니다.</p><p><br></p><p><br></p><p><br></p>
<!-- -->
]]>
카페 게시글
ASP.NET WEBFORM
JQuery UI Autocomplete 와 ashx 핸들러로 자동화 완성 구현하기
심재운
추천 0
조회 763
11.12.18 23:10
댓글 1
다음검색
첫댓글 DAUM 측의 스크립트 차단으로인해 코드 내용에 오류가 있습니다. 첨부파일을 다운 받아서 실행 해 보시면 됩니다.