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 most of the sites, I should able to delete particular record by clickin the cross mark in its corner), 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: "
<img src='" + item.Photo + "' Width='48' Height='48' /> | " + item.Name + " ( " + item.USN + " ) |
" + item.Email + " | | | " + item.Mobile + " |
|
",
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