how to make textbox or any control auto complete with web method making tags

See more:

C#3.5

VS2013

I want to make textbox or other control autoComplete using web method making tags.
Example: like in gmail when we write in cc all saved gmail id appera in tags.

My Code is

<div>
      
            <div class="col-lg-4">
                <div class="form-group">
                    
                        <asp:Label ID="lblTagCities" runat="server" Text="Tag Cities"></asp:Label>
                    <asp:TextBox ID="txtcity" runat="server" />
                    <div id="lblProcessingTagRegisteredUsers" class="pull-right" >
                   
                    </div>
                     
                 
                         
                </div>
            </div>
       
        <asp:HiddenField ID="hdnTagRegisteredUsers" runat="server" />
        
      

    
    </div>

<script src="../jQueryUI/jquery-ui-1.10.3.js"></script>
<script src="../tagit/tagit.js"></script>
<script src="../tagit/tagit-themeroller.js"></script>


<script type="text/javascript">

$(document).ready(function () {
$("#<%=txtcity.ClientID %>").tokenfield({
autocomplete: {
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/AutoComplete.asmx/GetCompletionList") %>',
data: "{ 'input': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response(data.d)
}
});
},
delay: 100
}
})
});
</script>

<pre lang="c#"> [WebMethod]
public string[] GetCompletionList(string prefixText)
{
CheckBoxList cbl = new CheckBoxList();

List<string> ajaxDataCollection = new List<string>();


DataTable dt = new DataTable();
dt.Columns.Add("city",typeof(String));
DataRow dr = dt.NewRow();
dr["city"] = "Agra";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr["city"] = "Ajmer";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr["city"] = "Mathura";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr["city"] = "Mahaban";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr["city"] = "Mumbai";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr["city"] = "Aligarh";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr["city"] = "Allahabad";
dt.Rows.Add(dr);

DataRow[] dr2 = dt.Select("city LIKE '%" + prefixText + "%'");
//Then return List of string(txtItems) as result
List<string> txtItems = new List<string>();
String dbValues;
DataTable cbldt=new DataTable();
cbldt.Columns.Add("city",typeof(String));

foreach (DataRow row in dr2)
{
DataRow cblrow = cbldt.NewRow();
cblrow["city"] = row["city"].ToString();
cbldt.Rows.Add(cblrow);
//String From DataBase(dbValues)
dbValues = row["city"].ToString();
dbValues = dbValues.ToLower();
ajaxDataCollection.Add(dbValues);
}
cbl.DataSource = cbldt;
// return cbl;

return ajaxDataCollection.ToArray();
}