我写过
1）使用datatable.js显示数据的脚本
2）自动完成方法
所有这些都是数据表方法正常工作。但是当我添加jquery.auto-complete.js脚本引用时，这些方法停止工作并且自动完成开始工作。
问题出在哪里，请建议。
<script>
$('.date-picker').datepicker({
format: 'mm/dd/yyyy'
});
// 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>
答案 0 :(得分：0)
包含jQuery之后，立即在脚本标记中添加以下内容。希望这能解决你的问题。
jQuery.noConflict();
答案 1 :(得分：0)
我不确定你的日期选择器或自动完成功能是如何工作的。当DOM可能没有准备好时，它们都在向DOM元素添加功能。尝试这样的事情：
<script>
var initFields = function() {
//Date Picker
$('.date-picker').datepicker({
format: 'mm/dd/yyyy'
});
//Autocomplete
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);
}
};
};
// var oTable = null;
jQuery(document).ready(function () {
App.init();
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
initFields();
});
</script>
如果这不起作用，那么您可能需要检查所包含的所有JavaScript文件以确保它们的所有版本都兼容，并且没有两个定义相同的函数/对象。
答案 2 :(得分：0)
不是添加单个自动完成脚本引用，只需添加jquery.ui完整的bundle脚本引用。我有类似的问题，但在添加jquery.ui并删除自动完成脚本后，一切都开始正常工作。希望它有所帮助