I have a autocomplete textbox, in that textbox am getting employee names. If I click that particular employee name, that particular employee’s details like photo,name,id,contact no these kind of details should be added as a box container(just same as the tags box in our stackoverflow), like this how many employee’s name em clicking on, that much of records should be added below that textbox, how can I do this, and which tool I have to use for this, can anyone help me
function searchEmployees() {
$("#txtEmployee").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "/DataService.asmx/SearchEmployees",
contentType: "application/json; charset=utf-8",
data: "{'searchTerm' : '" + $("#txtEmployee").val() + "'}",
dataType: "json",
success: function (data) {
var s = jQuery.parseJSON(data.d);
var i = 0;
var css = "";
if (s != null) {
response($.map(s, function (item) {
i++;
if (i == s.length) {
css = "autocompletetablenoborder";
}
else {
css = "autocompletetable";
}
return {
label: "<table class='" + css + "'><tr><td rowspan='4' width='50px;'><img src='" + item.Photo + "' Width='48' Height='48' /></td><td>" + item.Name + " ( " + item.USN + " )</td></tr><tr><td><table cellpadding='0' cellspacing='0'><tr><td>" + item.Email + "</td><td> | </td><td>" + item.Mobile + "</td></tr></table></td></tr></table></td></tr></table>",
name: item.Name
}
}));
}
else {
return null;
}
},
error: function (req, status, error) {
alert("ERROR:" + error.toString() + " " + status + " " + req);
}
});
},
minLength: 1,
select: function (event, ui) {
$("#Employee").val(ui.item.name);
return false;
}
});
}
here as you can see am trying to add the employee name(actually I need to display employee image,contact no, id…but just for trial am trying to bind name only) in the div, after we select a particular employee from the autocomplete list, but its not working, can anyone find out the issue
If you use jQuery UI for autocomplete input – there’s a special event on field when user click on thelist and select one or another – http://jqueryui.com/demos/autocomplete/#event-select