สุดท้ายก็โค้ด webservice คือใช้สร้าง web service ชื่อ AutoComplete.asmx แล้วไปแก้ AutoComplete.cs ใน app_code
AutoComplete.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Web.SessionState;
/// <summary>
/// Summary description for AutoComplete
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService {
public AutoComplete ()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string[] GetAutoCompleteList(string prefixText, int count)
{
// ต้องนี้เป็น linq จะเปลี่ยนเป็น sql command ก็ได้ แก้ได้ตามสะดวก
SqlServerDataContext sqlServer = new SqlServerDataContext();
string keyWord = prefixText.Trim().Replace(" ", string.Empty);
List<string> result = new List<string>();
(from d in sqlServer.Data
where d.Name.Contains(keyWord)
orderby s.Name ascending
select new
{
Name = d.Name
}).ToList().ForEach(d => result.Add(d.Name));
return result.Take(count).ToArray();
}
}
<script type="text/javascript">
function autocomplete_Populated(sender, e) {
if (sender._currentPrefix != null) {
var list = sender.get_completionList();
var search = sender._currentPrefix.replace(" ", "").toLowerCase();
for (var i = 0; i < list.childNodes.length; i++) {
var text = list.childNodes[i].innerHTML;
var index = text.toLowerCase().indexOf(search);
if (index != -1) {
var value = text.substring(0, index);
value += '<span style="color: black;">';
value += text.substr(index, search.length);
value += '</span>';
value += text.substring(index + search.length);
list.childNodes[i].innerHTML = value;
}
}
}
}
function autocomplete_Selected(sender, e) {
var SelectedText;
// Check for IE - should really check for the availabbility of the property... if(e._item.innerText)
if (document.all)
SelectedText = e._item.innerText;
else
SelectedText = e._item.textContent;
// Set the value of the textbox
sender.get_element().value = SelectedText;
// Get the value selected
SelectedValue = e.get_value();
}
</script>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="http://localhost:3899/CSharp/StyleSheet.css" />
<script type="text/javascript">
function autocomplete_Populated(sender, e) {
if (sender._currentPrefix != null) {
var list = sender.get_completionList();
var search = sender._currentPrefix.replace(" ", "").toLowerCase();
for (var i = 0; i < list.childNodes.length; i++) {
var text = list.childNodes[i].innerHTML;
var index = text.toLowerCase().indexOf(search);
if (index != -1) {
var value = text.substring(0, index);
value += '<span style="color: black;">';
value += text.substr(index, search.length);
value += '</span>';
value += text.substring(index + search.length);
list.childNodes[i].innerHTML = value;
}
}
}
}
function autocomplete_Selected(sender, e) {
var SelectedText;
// Check for IE - should really check for the availabbility of the property... if(e._item.innerText)
if (document.all)
SelectedText = e._item.innerText;
else
SelectedText = e._item.textContent;
// Set the value of the textbox
sender.get_element().value = SelectedText;
// Get the value selected
SelectedValue = e.get_value();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true"
EnableScriptLocalization="true">
</asp:ToolkitScriptManager>
<asp:TextBox ID="TextBoxSearch" runat="server" autocomplete="off"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" BehaviorID="AutoCompleteEx"
runat="server" TargetControlID="TextBoxSearch" ServicePath="AutoComplete.asmx"
ServiceMethod="GetAutoCompleteList" CompletionInterval="100" CompletionSetCount="12"
DelimiterCharacters="" Enabled="true" EnableCaching="true" MinimumPrefixLength="1"
CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" OnClientPopulated="autocomplete_Populated"
OnClientItemSelected="autocomplete_Selected">
</asp:AutoCompleteExtender>
</div>
</form>
</body>
</html>
AutoComplete.cs Code (C#)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Web.SessionState;
/// <summary>
/// Summary description for AutoComplete
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService {
public AutoComplete () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string[] GetAutoCompleteList(string prefixText, int count)
{
// ต้องนี้เป็น linq จะเปลี่ยนเป็น sql command ก็ได้ แก้ได้ตามสะดวก
dbsampleDataContext db = new dbsampleDataContext();
string keyWord = prefixText.Trim().Replace(" ", string.Empty);
List<string> result = new List<string>();
(from d in db.Customers
where d.CustomersName.Contains(keyWord)
orderby d.CustomersName ascending
select new
{
CustomersName = d.CustomersName
}).ToList().ForEach(d => result.Add(d.CustomersName));
return result.Take(count).ToArray();
}
}