At times you need to show some AutoComplete dropdown below a textbox as you starts typing. So that you can select any suggested text from the below list. Ajax Control toolkit will do this job quite easily but for those who doesn't want to use Ajax Control toolkit, JQuery is like another option by which they can replicate everything available in Ajax Control toolkit quite easily. Here we will see how we can make our own AutoComplete using JQuery and WCF.

Add a textbox and a script manager with reference to service.

<asp:ScriptManager ID="scr" runat="server">
<Services>
<asp:ServiceReference Path="~/Service.svc" />
</Services>
</asp:ScriptManager>
<div>
<label for="city">
Your city:
</label>
<input id="Question" type="text" />
</div>

Add this JQuery in head tag of your page.

<script type="text/javascript" language="javascript">
$("#Question").bind('keyup', function (e) {
var str = "";
if (e.keyCode == 13) { return false; }
var left = $("#Question").offset().left;
$("#autocom").remove();
$("#Question").after("<div id='autocom' class='popup'><div>")
SecServices.Service.GetTagString($("#Question").val(),
function (data) {
$("#autocom").append("<table cellpadding='1' cellspacing='1' width='100%'>");
$.each(data, function (index, elem) {
$("#autocom").append("<tr><td onclick='setText(this)' class='popuptd'>" + elem.Question + "</td></tr>");
});
$("#autocom").append("</table>");
});

$("#autocom").slideDown('slow');
$("#autocom").css("left", left);
$("#autocom").width($("#Question").width);
$("#Question").bind("keypress", "setTextKeyPress");
$("#autocom").bind('focusout', function () {
$("#autocom").slideUp('slow');
});
});
function setText(td) {
$("#Question").val($(td).html());
$("#autocom").slideUp('slow');
}
</script>
Add Some style
<style type="text/css">
.popup
{
background-color:#F0F0F0;
padding-left:100px;
overflow:auto;
position:absolute;
border:1px solid gray;
padding: 5px 5px 5px 5px;
}
.popuptd
{
color:Black;
}
.popuptd:hover
{
border: 1px solid #F4A83D;
}

</style>
and finally create a WCF service.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
[ServiceContract(Namespace = "RelSecServices")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract]
public Questions[] GetTagString(string term)
{
using (RelsecModel.RelsecEntities context = new RelsecModel.RelsecEntities())
{
var query = from c in context.msSecurityQuestions
where c.Question.StartsWith(term)
select new Questions() { id = c.Id, Question = c.Question };
return query.ToArray();
}
}
}