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();
}