Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#<%= txtMultipleName.ClientID %>").autocomplete({
source: function (request, response) {
$.getJSON("AutocompleteHandler.ashx", {
term: extractLast(request.term)
}, response);
},
search: function () {
// custom minLength
var term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
Multiple word:
<asp:TextBox ID="txtMultipleName" runat="server" TextMode="MultiLine" Width="470"
Height="30"></asp:TextBox>
</form>
</body>
</html>
Add a generic handler which will show the friend list: Right Click on your project and select generic handler:
AutocompleteHandler.ashx:
<%@ WebHandler Language="C#" Class="AutocompleteHandler" %>
using System;
using System.Collections.ObjectModel;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Script.Serialization;
public class AutocompleteHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string searchText = context.Request.QueryString["term"];
Collection<AutoCompleteDTO> collection;
NOTE: Here I have called getFriendSuggession() method from my DAL file which is returning me a table of my friend based on the text which i have typed in text box i.e. searchText.
DataTable dt = DAL.getFriendSuggession(searchText);
collection = new Collection<AutoCompleteDTO>();
foreach (DataRow dr in dt.Rows)
{
AutoCompleteDTO dto = new AutoCompleteDTO();
dto.value = dto.label = (string)dr["FirstName"];
//dto.id = Convert.ToString(dr["ID"]);
collection.Add(dto);
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonString = serializer.Serialize(collection);
context.Response.Write(jsonString);
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class AutoCompleteDTO
{
public string id { get; set; }
public string label { get; set; }
public string value { get; set; }
}
This post will definitely help you
Thanks
