manoj´ssharepointblog

SharePoint Blog

jQueryUI’s Autocomplete Function on InfoPath Forms in SharePoint

8 Comments

Recently I worked on a requirement where I need to implement the functionality of JQuery UI´s Auto Complete functionality on a Text box of Browser Based Infopath forms in SharePoint.

We all are familiar with this idea of AutoComplete, if not the actual term. You probably see it in action every single day as you use a search engine. As you type your search term(s), the search engine shows suggestions, probably based on some fairly sophisticated algorithms.

When InfoPath forms are rendered in the browser, they are built of ordinary markup just like any other page, albeit fairly complicated markup, driven by a lot of script.  That doesn’t mean that you can’t add some script of your own as well to add additional capabilities. There are a few peculiarities to this situation, though, which you need to handle.

Below I am going to illustrate it with an example how to implement Auto Complete on a text box placed on a browser based Infopath form.

Here the suggestions for the text box is retrieved from a SharePoint list.

I have a SharePoint List with the name Province.

Province

Create a Blank form using InfoPath Designer and add a text box to It.

Autocomplete

Now save and Publish the form as an Administrator-approved form template. Upload the published form to SharePoint and configure the Infopath Form to Forms Library.

Create a WebPart Page and add the below 2 WebParts

  • Content Editor WebPart
  • Infopath Forms WebPart

Configure the Infopath Forms WebPart with the newly Uploaded InfoPath Form. Add the below JavaScript to the content Editor WebPart and click ok.

Ajs 

(Click on the Image to Enlarge)

When InfoPath forms load in the browser, they don’t load with the rest of the page, but instead they are loaded slightly afterward in what amounts to an asynchronous load. Because of that, using $(document).ready(), our trusted jQuery friend, doesn’t work. Instead, as you can see in lines 1-3, we simply wait for 1000 milliseconds (1 second) before we run our script. We found that this was an adequate amount of wait time for our particular form; you might need to adjust this.

we use my SPServices library to call the Lists Web Service, using the GetListItems operation. This operation simply reads items from the list based upon the criteria you specify. Once we have the data, we push each of the Title column values into an array called externalParties.

Finally, we call the jQueryUI function autocomplete, using one selectors. One of the hardest parts of all of this was to figure out what selector to use. We settled on looking for an input element where the id contained ‘FormControl0_V1_I1_T1′. How to retrieve the selector is mentioned below.

Save the Page and you will see a similar functionality as below.

Auto

How to Retrieve the Selector for Infopath form

Open the InfoPath form in the browser, now by using IE Developer tool or Fire Bug select the textbox on which you want to implement the AutoComplete functionality. You will find a similar html mentioned below

<INPUT onblur=”return (TextBox.OnBlur(this, event));” style=”POSITION: relative” onpropertychange=”return (TextBox.OnPropertyChange(this, event));” id=ctl00_ctl23_g_620ee09a_3a7c_43d6_9ddc_2c45fda39c3f_FormControl0_V1_I1_T1 onfocus=”return (TextBox.OnFocus(this, event));” title=”” tabIndex=0 type=text autocomplete=”off” VCARD_NAME=”aa96ac44a47dc6889f650eb439525d7b7f7fa1d5″ OriginalId=”V1_I1_T1″ FormId=”ctl00_ctl23_g_620ee09a_3a7c_43d6_9ddc_2c45fda39c3f_FormControl0″ ViewDataNode=”2″ direction=”ltr” wrapped=”true” ScriptClass=”TextBox” jQuery18305936701748461459=”6″>

 

Pick only the Id of the control which is “ctl00_ctl23_g_620ee09a_3a7c_43d6_9ddc_2c45fda39c3f_FormControl0_V1_I1_T1”

And the selector will be FormControl0_V1_I1_T1 for the above input control.

Advertisements

8 thoughts on “jQueryUI’s Autocomplete Function on InfoPath Forms in SharePoint

  1. I followed the same as mentioned above but not working.Was able to retrieve the values from the list but its not binding to the control as the autocomplete is not working.Is there any particular css which we need to include to make it work.The iD of the control is same as it appears in the developer tools.

  2. Its working.Thanks for your post.

  3. Does this solution work if its not Infopath form Webpart?

  4. When Infopath send information to server, loosing textbox auto complete behaviour

  5. Manoj, how´re you?

    I need some help. Your script saved my life and it´s working just perfect but for some internal reason, I had to put another field in the same form and this extra field is a People Picker. After that, the script is not working anymore.

    After some research I realize that the People Picker field does a form reload to check the login typed on it, however the script is not reloaded together in this second time because only the form is reloaded by People Picker, not the Sharepoint page.

    If the AutoComplete field is filled before the PeoplePicker one, everything work as charm, in the opposite way I have the problem.

    Any ideas that could save me from this dead end? I was wondering a way to adapt your script to be ran inside the form on an event “On Focus” in the AutoComplete field, what do you think about that?

    Best regards and thanks in advance.
    Rafael Machado

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s