我编写了 1) 使用 datatable.js 显示数据的脚本
2) 自动完成方法
- PortletDraggable.init();
- FormFileUpload.init();
- EducationalQualification.init();
- 工作经验.init();
- 监督.init();
- 奖项.init();
- 发布.init();
所有这些都是正常工作的数据表方法。但是当我添加 jquery.auto-complete.js 脚本引用时，这些方法停止工作并且自动完成开始工作。
问题出在哪里，求指教。
<script>
// var oTable = null;
jQuery(document).ready(function () {
App.init();
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
});
var tmpMem = 0; var tmpAward = 0; var tmpPub = 0;
// Js For Autocomplete
$('input[name=SearchUser]').autocomplete({
source: function (request, response) {
tmpMem = 0; tmpAward = 0; tmpPub = 0;
$.ajax({
type: 'GET',
url: '@Url.Action("SearchUser", "Profile")',
data: { FirstName: $("#SearchUser").val() },
// url: "/Profile/SearchUser?FirstName=" + $("#SearchUser").val(),
contentType: "application/json; charset=utf-8",
// dataType: "json",
beforeSend: function () {
// code to show loading image
//$(".ui-content").css("opacity", "0.4");
//$("#imgLoader").attr("style", "display:block");
//var df = document.getElementById('imgLoader');
//df.style.position = 'absolute';
//var wd = ($(window).width() / 2) - 45;
//var hg = ($(window).height() / 2) - 60;
//df.style.left = wd + "px";
//df.style.top = hg + "px";
},
complete: function () {
//hide loading image
$(".ui-content").css("opacity", "1.0");
$("#imgLoader").attr("style", "display:none");
},
success: function (data) {
alert(data.data[0].Fname);
response($.map(data.data, function (item) {
return {
Sn: item.Sn, Fname: item.Fname, Mname: item.Uname, Lname: item.Lname, Title: item.Title,
Image: item.Image, Organization: item.Organization, JobTitle: item.JobTitle,
Awardname: item.Awardname, AwardYear: item.AwardYear, Pubname: item.Pubname, Pubtype: item.Pubtype, TabType: item.TabType
}
}))
}
})
},
select: function (event, ui) {
//var domainURL = $("#domainurl").val();
//window.location = domainURL + "/home/NeighborProfile?id=" + ui.item.id;
// alert(ui.item.Sn);
}
}).data("autocomplete")._renderItem = function (ul, item) {
// alert(item);="
if (item.TabType == "member") {
if (tmpMem == 0) {
tmpMem = 1;
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Members </span>").appendTo(ul);
}
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "award") {
if (tmpAward == 0) {
tmpAward = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Awards </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "publications") {
if (tmpPub == 0) {
tmpPub = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Publications </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).appendTo(ul);
}
};
</script>