This way
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=txtSearch]").autocomplete({
source: function (request, response) {
if (request.term.indexOf('@') != -1 && request.term.split('@')[1] != '') {
$.ajax({
url: 'Default.aspx/GetProviders',
data: "{ 'prefix': '" + request.term.split('@')[1] + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.d.length > 0) {
response($.map(data.d, function (item) {
return {
label: request.term.split('@')[0] + "@" + item.split('-')[0],
val: request.term.split('@')[0] + "@" + item.split('-')[0]
};
}))
} else {
response([{ label: 'No results found.', val: -1}]);
}
}
});
}
},
select: function (e, u) {
if (u.item.val == -1) {
return false;
}
}
});
});
</script>
Enter search term:
<input type="text" id="txtSearch" style = "width:150px" />
Code
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod()]
public static string[] GetProviders(string prefix)
{
List<string> providers = new List<string>();
providers.Add("gmail.com");
providers.Add("yahoo.com");
providers.Add("outlook.com");
providers.Add("rediff.com");
return providers.Where(f => f.Contains(prefix.ToLower())).ToArray();
}
Screenshot
