Develop Reference

Fetch server side data using typescript

I am new in typescript and i am wondering how do we write the below code in typescript. My project is in asp.net MVC.
Here is my code :
$("#EmployeeCode").autocomplete({
source: function (request, response) {
$("#EmployeeCode").val('');
$.ajax({
url: '/Admin/Search/Country/' + request.term,
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return {
label: item,
val: item.split('-')[1],
}
}))
},
error: function (response) {
console.log(response.responseText);
},
failure: function (response) {
console.log(response.responseText);
}
});
},
select: function (e, i) {
// $(this).val(i.item.val);
$("#EmployeeCode").val(i.item.val);
},
minLength: 3
});

Typescript is just a superset of javascript so javascript is valid. You can if you want just use it as it is.

Autocomplete adding extra spaces

Image Example
Image Example Keyboard
My auto commplete is adding extra spaces when data is selected from web services, how do i fix this?
i've tried mostly everything but isnt getting any results
Code:
https://jsfiddle.net/jz1e4tr6/1/
$(document).ready(function () {
$("#<%=TextBox1.ClientID%>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("/Normal/WebServices/AutoComplete.asmx/GetSubject")%>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
attr: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},

An alternative "tweak" but not the right solution... before clicking submit in the code behind... i get the value from the textbox and into a variable. And trim the variable.

my jquery autocomplete not working

i use jquery for create an autocomplete for a textbox, data fetches from an an asmx webservice. i monitor my code on firebug ,this tool shows request sent and xml response recieved . but autocomplete not open for textbox :(
Could someone please tell me why my code for the jquery autocomplete is not working?
jquery code:
<link href="../Script/MainCSS.css" rel="stylesheet" />
<link href="../Script/jquery-ui.css" rel="stylesheet" />
<script src="../Script/jquery-1.10.2.js"></script>
<script src="../Script/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('.textBox').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Services/BusService.asmx/GetRouteInfo",
data: { param: $('.textBox').val() },
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var err = eval("(" + XMLHttpRequest.responseText + ")");
alert(err.Message)
// console.log("Ajax Error!");
}
});
},
minLength: 2 //This is the Char length of inputTextBox
});
});
</script>
my c# code:
[WebMethod]
public string[] GetRouteInfo(string param)
{
List<string> list_result = new List<string>();
AutoTaxiEntities useEntity = new AutoTaxiEntities();
System.Data.Entity.Core.Objects.ObjectResult<DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result> sp_result = useEntity.SP_FIND_ROUTE_ROUTESTOPS(param);
foreach (DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result sp_result_item in sp_result.ToList())
{
list_result.Add(sp_result_item.ID + "," + sp_result_item.ITEMTYPE + "," + sp_result_item.TITLE);
}
return list_result.ToArray();
}

Looking at your added script references, i think you have not added autocomplete.js script. Please add it and try it once.Please click here

$(document).ready(function () {
$('#<%=txtSearch.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "/Services/BusWebService.asmx/GetRouteInfo",
data: "{ 'param': '" + request.term + "' }",
dataType: "json",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
itemid: item.split(',')[0],
itemtype: item.split(',')[1],
label: item.split(',')[2]
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (event, ui) {
$('#<%=hfItem.ClientID%>').val(ui.item.itemid + ',' + ui.item.itemtype + ',' + ui.item.label);
//$("form").submit();
}
});
});

Textbox's Textchanged event not fire in chrome

i am Creating a page that search all client details...
i am also using json for autocomplete textbox with data of datatable...
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
});
i want to view data of that selected name on textbox on textchanged event,
their setup of textbgox looks like..`
<asp:TextBox ID="txtSearch" runat="server" AutoPostBack="True"
ontextchanged="txtSearch_TextChanged"></asp:TextBox>
That textchenged event trigger properly in mozilla, but not working in chrome,,
can anyone suggests some solution....

I would suggest calling server side's textbox onchange event after selecting a value from the autocomplete list as,
...
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
__doPostBack("txtSearch", "TextChanged");
},
minLength: 1
});
and remove autopostback property of that textbox as we are firing it from client side.
Or you can make an ajax call on select event and populate required data in client side itself.

` $(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
InitAutoCompl();
});
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
InitAutoCompl();
}
function InitAutoCompl() {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: ''<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('##')[0],
val: item.split('##')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
minLength: 1, change: function (event, ui) { __doPostBack("txtSearch", "TextChanged"); }
});
}
and remove Autopostback="true" from TextBox
`

Autocomplete returns an error on ajax request

I am trying to use jQuery Autocomplete on a text box, but it's not working.
Here is my script to get autocomplete list from database but it gives me error and alerts error message.
$(function () {
$("#ContentPlaceHolderSearch_txt_Search").autocomplete({
source: function (request, response) {
$.ajax({
url: "Service/AutoComplete.asmx/GetCompletionListName",
data: "{ 'prefixText': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2
});
});
Here Is my server code
[WebMethod]
public string[] GetCompletionListName(string prefixText, int count)
{
List<string> items = new List<string>(count);
GA_UsersTableAdapter uta = new GA_UsersTableAdapter();
UserControllar.GA_UsersDataTable udt = uta.GetDataByNameAutoComplete(prefixText);
foreach (DataRow row in udt.Rows)
{
items.Add(row["Full_Name"].ToString());
}
return items.ToArray();
}

i just changed my service path in script from
url: "Service/AutoComplete.asmx/GetCompletionListName"
to
url: "../Service/AutoComplete.asmx/GetCompletionListName"
and it works now...