JQuery Autocomplete Sharepoint 2013 and Infopath, Works Only Once

Question

I am new to this community and I have been looking for an answer on this for the past 48hs searching and trying.

I created a form in Infopath Designer 2013. Also I am using SPD 2013 and what I am trying to accomplish is to get a couple fields bind to Jquery Autocomplete using SPServices to create the data vector.

I got this to work, but it works only ONCE. I created a page within Sharepoint and included the Infopath Webpart, also a Content Editor Web part with a script snippet that contains:

<script type="text/javascript" src="../jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.SPServices.js"></script>
<script type="text/javascript" src="../Scripts/OpenCaseFormAutocomplete.js"></script>

My file script OpenCaseFormAutocomplete:

Sys.Application.add_load(function() { 

$(document).ready(readyCall);

function readyCall(){

  var externalParties1 = [];
  var externalParties2 = [];

  $().SPServices({
    operation: "GetListItems",
    listName: "Autocomplete_Customer",
    CAMLViewFields: "",
    async: false,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        externalParties1.push($(this).attr("ows_Title"));
      });
    }
  });

  $().SPServices({
    operation: "GetListItems",
    listName: "Autocomplete_End-User",
    CAMLViewFields: "",
    async: false,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        externalParties2.push($(this).attr("ows_Title"));
      });
    }
  });

  
  $("input[id$='FormControl0_V1_I1_T3']").autocomplete({
    source: externalParties1,
    minLength: 3
  });
  
  $("input[id$='FormControl0_V1_I1_T4']").autocomplete({
    source: externalParties2,
    minLength: 3
  });
	
	      
}	  

});
/*

I read somewhere that there is an issue with postback. But I don't seem to get this code to work after the first time. The second the form runs a postback call it clears the attached autocomplete from the inputs.

Is there a fix for this, a place I should put the code to avoid loosing the bind or a rebind code alternative?

Have you tried to move the $("input[id$='FormControl0_V1_I1_T3']").autocomplete code inside the completeFunc of $().SPServices has last line ? — Max

Adi Solar Adi Solar · Accepted Answer · 2016-12-18T13:05:59

Because the form is constantly automatically reloading in the background whether you do or don't do anything, you need to call your function again. So in the end of your code in the function, use setTimeout() method to call itself after 500 millisecs.
Also, you should do this where you have Sys.Application.add_load:

    Sys.Application.add_load(function() {
 ExecuteOrDelayUntilScriptLoaded(YourFunctionName, "sp.js");
  });

JQuery Autocomplete Sharepoint 2013 and Infopath, Works Only Once

1 Answers