I try to store an identifier into an hiddenfield when a value is selected with a jquery autocomplete field.
But the select event is never fired and I dont't see why..
here is my code
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
},
});
});
The autocompletion is properly working, I can see the values, select one but when I select a value nothig happens..
I believe your curly braces are wrong. select is being set as part of the ajax parameter, not autocomplete:
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
}
});
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
});
Related
I am using this functionality to fill the JQuery UI with minimum length set to 2. This code works good when I try to select the list through mouse or through keyboard.
But once I publish my code through my virtual machine it does not work. Neither the minimum length works nor the mouse or keyboard selection works.
Please help me here.
function SPAutoComplete(request, response) {
//debugger;
$.ajax({
url: 'Contracts/SearchSpByNumber',
type: 'GET',
cache: false,
contentType: "application/json; charset=utf-8",
data: request,
dataType: 'json',
success: function (json) {
var i = 0;
i++;
// call autocomplete callback method with results
response($.map(json, function (item) {
return {
label: item.SP_NBR,
SPDesc: item.SP_DESC,
ID: item.ElementID
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert('error - ' + textStatus);
console.log('error', textStatus, errorThrown);
}
});
}
$("#SP1").autocomplete({
source: SPAutoComplete,
minLength: 2,
select: function (event, ui) {
// alert('you have selected ' + ui.item.name + ' ID: ' + ui.item.name);
$("#SP1").val(ui.item.label);
$("#SPDesc1").val(ui.item.SPDesc);
$("#SPDesc1").attr("readonly", true);
$("#SP1ID").val(ui.item.ID);
_newDirty = true;
event.preventDefault();
return false;
},
change: function (event, ui) {
debugger;
if (ui.item != undefined || ui.item != null) {
$("#SP1").val(ui.item.label);
$("#SPDesc1").val(ui.item.SPDesc);
$("#SPDesc1").attr("readonly", true);
$("#SP1ID").val(ui.item.ID);
event.preventDefault();
return false;
}
},
focus: function (event, ui) {
debugger;
$("#SP1").val(ui.item.value);
return false;
}
});
I am using autocomplete of jQuery, everything is working fine but select and change event is not working. Please help me out of it.
$("#id").autocomplete({
source: function (request, response) {
$.ajax({
type: "GET",
contentType: "text/html; charset=utf-8",
url: sUrl + "&id="+$.trim(request.term),
dataType: "xml",
success: function (data) {
//success code
},
select: function (event, ui) {
alert("dfd"); //This is not getting executed
},
change: function (event, ui) {
alert("chnge"); //This is not getting executed
},
error: function (result) {
alert(result.responseText);
}
});
}
});
I found this example online and it was perfectly fine but I'd like to know how to store (hidden) the employeeID, so it can be used later on the server side.
Thank you
<script type="text/javascript">
$(function() {
$(".tb").autocomplete({
source: function(request, response) {
$.ajax({
url: "EmployeeList.asmx/FetchEmailList",
data: "{ 'mail': '" + 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.Email
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1
});
});
</script>
The autocomplete has a change event which is fired when the field is blurred if the value has changed. You need to bind an event handler to this event and then set a hidden field within that event handler.
So
$(".tb").autocomplete({
source: function(request, response) {
$.ajax({
url: "EmployeeList.asmx/FetchEmailList",
data: "{ 'mail': '" + 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.Email
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1,
change : function (event,ui) {
$("#hdnEmpId").val(ui.item.value);
}
});
You will have to figure out how you want to implement the change event handler. You can read more about that at http://jqueryui.com/demos/autocomplete/#event-change
Hope this helps!
I am using jquery autocomplete. I am facing some issues.
When scrolling through autosuggest in the populated list and hitting the enter key to
select, its not firing the event "select". I am setting a hidden field with the value that is selected. This works fine if i select the item using the mouse.
$(autoSuggestField).autocomplete({
source: function (request, response) {
$.ajax({
url: "../Transport/location",
dataType: "json",
data: {
"prefix": request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
value: item.Name,
x: item.Code
}
}));
}
});
},
minLength: 0,
select: function (event, ui) {
$(codeField).val(ui.item.x);
//sets the value to hidden field.
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
My question is: How to attach the same series of events to many id's
in this case I'm attaching all of this code to "#employeeBox"
$("#employeeBox").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%:ResolveUrl("~/Lookup/SearchEnterpriseUsers")%>',
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
nameLike: request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.FullName,
value: item.EmployeeId
}
}))
}
})
},
minLength: 2,
select: function (event, ui) {
alert(ui.item.value)
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
What if I want to attach it to many id's.
Like
for (int i=0; i < count; i++)
"#employee_" + i + "_Box"
what's the best way to do this without a lot of repeated code?
thanks!
if you can, just add a class to all your elements and attach the event to that class instead of to a bunch of ids.
$('.myClass').live('myevent', function(e) { //some function });
If you gave them all a class of employeeBox you could just do $('.employeeBox').autocomplete().