SPAutocomplete in a customized InfoPath Form

Jun 4, 2012 at 10:25 AM

I have a customized InfoPath Form that I need "autocomplete" behaviour on.

Using SpAutocomplete, the functionality works beautifully on the default form, but as soon as I customize the form in any way, I get exceptions.

Is there anything I am missing or will this require some code?

Coordinator
Jun 4, 2012 at 11:30 AM

SPAutocomplete is built to work only on the default forms or forms that are customized in a certain way, not Infopath. Infopath forms have a totally different representation in the DOM, as you'd expect.

However, I've done this in Infopath forms using jQueryUI's autocomplete. Take a look at my post about it: Using SPServices with jQueryUI’s Autocomplete Function on InfoPath Forms in SharePoint.

M.

Jun 4, 2012 at 11:47 AM
Edited Jun 4, 2012 at 11:52 AM

Hi Mark

Thanks for the reply, I have been digging into that exact article for about three days now and cannot figure out where I am going wrong.

If you don't mind, I could really use some help as this is of the highest importance.  here is my entire sript. I haven't added anything to the Masterpage and I have gone througth the Jquery UI docs, I am absolutely lost at what I am not doing... Please help.

 

 
<script language="javascript" src="/javascripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/javascripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" src="/javascripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

window.onload = function() 
{
  window.setTimeout(readyCall, 1000);
}

function readyCall(){

  var externalParties = [];

  $().SPServices({
    operation: "GetListItems",
    listName: "Projects",
    CAMLViewFields: "",
    async: false,
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName='z:row']").each(function() {
        externalParties.push($(this).attr("ProjectName"));
      });
    }
  });
  
  $("input[id$='FormControl0_V1_I1_T6']").autocomplete({
    source: externalParties,
    minLength: 3
	
});

};

</script>
Projects are in the same site as the list of the form in question.
  • I got the input selector using firebug
  • ProjectName is the column name - this is an external list

here is the snip from firebug

 

  

 

 

<input id="ctl00_m_g_d2985357_3bdf_4525_b020_eaf1840b353f_FormControl0_V1_I1_T6" class="m_QVdZWJNqZR9zsKdC_0 y_QVdZWJNqZR9zsKdC_0 an_QVdZWJNqZR9zsKdC_0" type="text" style="position: relative;" value="" title="" tabindex="0" originalid="V1_I1_T6" formid="ctl00_m_g_d2985357_3bdf_4525_b020_eaf1840b353f_FormControl0" viewdatanode="7" direction="ltr" wrapped="true" scriptclass="TextBox" oninput="return (TextBox.OnInput(this, event));" onblur="return (TextBox.OnBlur(this, event));" onfocus="return (TextBox.OnFocus(this, event));">
Coordinator
Jun 4, 2012 at 12:23 PM

Hein:

Ah, the same Hein from my blog. I notice that you aren't referencing the jQueryUI CSS. That might cause you not to actually see anything even if it's working.

Also, have you stepped through the script in Firebug (or IE's Developer Tools)?

M.

Jun 4, 2012 at 12:28 PM
Edited Jun 4, 2012 at 12:30 PM

Hi Mark

I added the CSS link, but i needed to change the .find to .spfilterNode in the selector.

This was my first real shot at JS, CSS etc... an I will definately be using your blogs and libraries again.

Thanks again for the help, it is much appreciated.


Coordinator
Jun 4, 2012 at 12:45 PM

Awesome. Glad you got it going.

M.