ASP.NET กับ jQuery: สร้าง Auto Complete Search Box

สวัสดีครับ

บทความนี้ผมก็จะ แสดงวิธีทำ auto complete box ด้วยกลไก AJAX การทำงานก็คือ มี textbox ให้ user กรอกข้อมูลที่สมบูรณ์บางอย่าง หรือเพื่อใช้เป็น keyword ค้นหาข้อมูลข่าวสารตามต้องการ โดย keyword ดังกล่าวที่จะกรอกเข้าไปใน textbox จะสืบค้นมาจาก batabase ที่สืบค้น มีข้อมูลที่สมบูรณ์ถูกต้องบ่อยๆจาก server แล้วนำมาแสดงใน textbox เป็นรายการขึ้นมาแสดงให้เลือกโดยอัตโนมัติ แบบไม่มีการ refresh ใดๆทั้งสิ้นเกิดขึ้นที่ web form หน้าจอ user เลย เพราะผมประยุกต์ใช้กลไก AJAX แล้ว

ด้วยการประยุกต์ใช้เทคนิค auto complete textbox เช่นนี้ช่วยให้ user กรอกข้อมูลได้ง่่าย ลดข้อผิดพลาด และรวดเร็วขึ้นเป็นอย่างมาก ดูรูปตัวอย่างข้างล่างประกอบความเข้าใจ เป็นตัวอย่าง application ที่ให้ user กรอกชื่อประเทศที่ต้องถูกต้องก่อนส่งไปประมวลผลต่อที่ server ลงไป

พอ user พิมพ์ t เข้าไป เพราตั้งใจจะกรอกคำว่า Thailand จากนั้นแล้วใน textbox ที่ได้ประยุกต์เทคนิค auto complete แล้วนั้น จะแสดงหน้าจอแบบนี้

ซึ่งรายชื่อที่นำมาแสดง มันก็คือชื่อประเทศที่ถูกต้องแล้วโดยเงื่อนไขการค้นหาคือ มีตัว t อยู่ในชื่อด้วยนั้นเอง เอาละเรามาเริ่มทำกันเลย

ลงมือทำ

1. dowload projects จาก Source Code เพื่อนำมาทำต่อ load มาเสร็จให้แตก file ออกก่อน แล้วเปิด web projects นี้ด้วย Visual Studio 2010 ครับ

2. เพิ่ม HTTP handler SearchKeys.ashx เข้าไปใน project โดยไปที่ Solution Explorer เลือก project แล้ว click ขวา > Add New Items … > Generic Handler แล้วตั้งชื่อว่า SearchKeys.ashx กด OK

3. เพิ่ม namespaces ตามโดย using code ข้างล่างนี้ลงไปที่ code-behind ของ SearchKeys.ashx

using System.Collections.Generic;
using System.Web.Script.Serialization;

4. ที่ HTTP Handler มันจะ implements IHttpHandler ซึ่งประกอบด้วย functions หลักๆ 2 อัน ได้แก่

  • ProcessRequest ซึ่งมันรับ HttpContext เป็น parameter
  • IsResuable ซึ่งมันจะ return ค่า Boolean

5. สร้าง function ที่จะ return list ของ keywords  ที่ match กับ textbox ที่ user กรอก

public static string[] GetFilteredList(string keyword)
{

var countryList = new List<string> { “Australia”, “Indonesia”, “Philippines”, “New Zealand”, “Singapore”, “Thailand”, “Korea”, “Vietnam” };
var filteredList = countryList.FindAll(w => w.ToUpper().Contains(keyword.ToUpper()));
return filteredList.ToArray();

}

6. ที่ function ProcessRequest  แก้ไข โยให้เติม code ข้างล่างนี้ลงไป

public void ProcessRequest (HttpContext context)
{

string keyword;
keyword = context.Request.QueryString[“keyword”];
if (keyword != null)
{

JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonString = serializer.Serialize(GetFilteredList(keyword));
context.Response.Write(jsonString);

}

}

7. ขันต่อมาให้เพิ่ม ASPX Web Form เข้าไปชื่อว่า AjaxAutoCompleteSearchBox.aspx เพื่อใช้แสดง textbox ให้ user กรอกตาม demo ที่ได้แสดงไว้แล้วในตอนแรก แล้วเติม code form เข้าไปตามข้างล่างนี้

<form id=”form1″ runat=”server”>

<div align=”center”>

<fieldset style=”width:400px;height:100px;”>

<table cellpadding=”3″ cellspacing=”3″ border=”0″>

<tr>

<td><label id=”lblCountry” runat=”server”>กรุณากรอกชื่อประเทศ: </label></td>

<td><asp:TextBox ID=”txtSearch” runat=”server”></asp:TextBox></td>

</tr>

</table>

</fieldset>

</div>

</form>

8. ถึงขั้นตอนนี้ ให้ไป download jQuery UI library จาก http://jqueryui.com/download ซึ่งประกอบไปด้วย Core, Widget, Position, Aautocomplete ที่ต้องนำมาใช้งาน เมื่อได้มาแล้ว ให้แตก file ออกมาแล้วเพิ่ม CSS ของ jQuery UI และ include library jQuery UI ต่างๆเข้าไปใน Web form ตามข้างล่างนี้

<link href=”css/jquery-ui-1.8.7.custom.css” rel=”stylesheet” type=”text/css” />
<script src=”Scripts/jquery-1.6.2.min.js” type=”text/javascript”></script>
<script src=”Scripts/jquery-ui-1.8.7.custom.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.ui.core.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.ui.position.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.ui.widget.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.ui.autocomplete.js” type=”text/javascript”></script>

ขั้นตอนต่อไปผมก็จะเพิ่มกลไก javascript เข้าไปเพื่อทำงาน Auto Complete Search Box ตามที่ผมต้องการ code ที่เสร็จสมบูรณ์แล้ว เป็นแบบนี้

<script language=”javascript” type=”text/javascript”>

$(document).ready(function () {

$(“#txtSearch”).autocomplete({

minLength: 1,
source: function (request, response) {

$.ajax({

type: “POST”,
url: “SearchKeys.ashx?keyword=” + request.term,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {

response($.map(data, function (item) {

return { value: item }

}))

},
error: function () {

alert(“An unexpected error has occurred during processing.”);

}

});

}

});

});

</script>

OK เสร็จแล้วครับการทำ auto complete textbox ก็ลองเอาไปประยุกต์ใช้ดูนะครับ

Source Code at Github => https://github.com/chavp/MyWebLabs/tree/master/AjaxWeb

ขอบคุณครับ 😉

Advertisements

#asp-net, #javascript, #jquery