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.
Create a Blank form using InfoPath Designer and add a text box to It.
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
(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.
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.