如果自动完成开始,datatable.js将停止工作

我写过1)脚本使用datatable.js来显示数据
2)自动完成方法

  1. PortletDraggable.init();
  2. FormFileUpload.init();
  3. EducationalQualification.init();
  4. WorkExperience.init();
  5. Supervisions.init();
  6. Awards.init();
  7. Publication.init();

所有这些都是数据表方法正常工作。 但是当我添加jquery.auto-complete.js脚本引用时,这些方法停止工作并且自动完成开始工作。

问题出在哪里,请提出建议。

 $('.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 $("
  • ").data("item.autocomplete", item).append( "" + "" + item.Fname + "" + "" + item.Title + ". " + item.Fname + "" + " " + item.Organization + "" + "" + "" + item.JobTitle + "" + "" ).prepend(" Members ").appendTo(ul); } return $("
  • ").data("item.autocomplete", item).append( "
    " + "" + "" + item.Fname + "" + "" + item.Title + ". " + item.Fname + "" + " " + item.Organization + "" + "" + "" + item.JobTitle + "" + "" ).appendTo(ul); } else if (item.TabType == "award") { if (tmpAward == 0) { tmpAward = 1; return $("
  • ").data("item.autocomplete", item).append( "" + "" + item.Fname + "" + "" + item.Title + ". " + item.Fname + "" + " " + item.Organization + "" + "" + "" + " " + item.Awardname + "(" + item.AwardYear + ")" + "" + "" ).prepend(" Awards ").appendTo(ul) } return $("
  • ").data("item.autocomplete", item).append( "
    " + "" + "" + item.Fname + "" + "" + item.Title + ". " + item.Fname + "" + " " + item.Organization + "" + "" + "" + " " + item.Awardname + "(" + item.AwardYear + ")" + "" + "" ).appendTo(ul); } else if (item.TabType == "publications") { if (tmpPub == 0) { tmpPub = 1; return $("
  • ").data("item.autocomplete", item).append( "" + "" + item.Fname + "" + "" + item.Title + ". " + item.Fname + "" + " " + item.Organization + "" + "" + "" + " " + item.Pubname + "," + item.Pubtype + "" + "" ).prepend(" Publications ").appendTo(ul) } return $("
  • ").data("item.autocomplete", item).append( "
    " + "" + "" + item.Fname + "" + "" + item.Title + ". " + item.Fname + "" + " " + item.Organization + "" + "" + "" + " " + item.Pubname + "," + item.Pubtype + "" + "" ).appendTo(ul); } };

    在包含jQuery之后,立即在脚本标记中添加以下内容。 希望这能解决你的问题。

     jQuery.noConflict(); 

    我不确定你的日期选择器或自动完成function是如何工作的。 当DOM可能没有准备好时,它们都在向DOM元素添加function。 尝试这样的事情:

      

    如果这不起作用,那么您可能想要检查所包含的所有JavaScript文件以确保它们的所有版本都兼容,并且没有两个定义相同的函数/对象。

    而不是添加单个自动完成脚本引用,只需添加jquery.ui完整的包脚本引用。 我有类似的问题,但在添加jquery.ui并删除自动完成脚本后,一切都开始正常工作。 希望能帮助到你