You find updated documentation here

"filterCAML":"<Eq><FieldRef Name='Author' LookupId='TRUE' /><Value Type='Integer'><UserID/></Value></Eq>"

spjs.ac.textField({
	"applyTo":"Project",
	...
	"enforceUniqueValues":true, // New
	...
	...

spjs.ac.peoplePicker({
	"applyTo":"Responsible",
	"forceOn2013":true,
	...

I have previously posted a few solutions here and here, but those are old and does not work for new SharePoint versions.

I have redone the solution to bring it up to support SP2007, SP2010 and SP2013. This is a total remake that does not rely upon jQueryUI for the autocomplete part.

In this example, I have added autocomplete to the single line of text field “Project”, and to the single choice people picker “Responsible”.

Here I have started typing in the Project field:

You can use this solution with single line of text columns and single choice people picker columns. I have not built in support for multi choice people pickers.

Please note that this solution is made for unmodified SharePoint forms (NewForm and EditForm) and will not work for custom forms modified in SPD or InfoPath. It will however play nice with DFFS.

The people picker autocomplete is not available in SP 2013 as this version already have this built in.

1. If you don’t have jQuery already, get it here
2. Get the latest version of spjs-utility.js from here.
3. Download the file “spjs-autocomplete.js” from here.
4. Add the code below the form in NewForm and EditForm as described below.

Add this code below the form web part in NewForm and EditForm using a HTML form Web Part, Script Editor or link to a file containing the code from a Content Editor Web Part using the content link option.

<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/Autocomplete/spjs-autocomplete.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();

spjs.ac.textField({
	"applyTo":"Project",
	"helpText":"Project name or number...",
	"listGuid":"ProjectList",
	"listBaseUrl":"/test",
	"showField":"Title",
	"optionDetailFields":"[], // New in v 1.4.12
	"enforceUniqueValues":true, // New in v1.33
	"rowLimit":15,
	"listOptionsOnFocus":false,
	"minLengthBeforeSearch":3, // New in v 1.4.12
	"reValidateOnLoad":false,
	"allowAddNew":false, // New in v1.4
	"isLookupInSelf":false, // New in v1.4
	"filterCAML":"", // New in v1.4.3
	"multiselect":true, // New in v1.4.4. If this is true, the "setFields section will not apply",
	"multiselectSeparator":"; ", // New in v1.4.4.
	"orderBy":[{"fin":"Title","ascending":true}], // New in v1.4.5
	"setFields":[
		{
			"fromFIN":"ProjectNumber",
			"toFIN":"PNumber",
			"parseFunction":"",
			"skipIfEmpty":false
		}
	]					
});					
	
</script>

• applyTo: The FieldInternalName of the field to add autocomplete to.
• helpText: The text in the autocomplete field when it is empty
• listGuid: The list GUID or the display name of the list you are pulling the options from.
• listBaseUrl: The base url of the list. For a subsite named “Test”, this is the correct base url: “/test”. For the root site, use an empty string like this: “”.
• showField: This is the field to show in the autocomplete.
• optionDetailFields: Additional fields to show more details in the drodown.
• enforceUniqueValues new in v1.33: true or false to only return unique values.
• rowLimit: This is the max number of items to pull back. Use a low number to keep the query lightweight and fast.
• listOptionsOnFocus: true or false determines whether or not to pull in the first batch when the field gets focus. Setting this to true will mimic a dropdown with an arrow to the right.
• minLengthBeforeSearch: This settings controls how many characters the user needs to enter before the search is triggered.
• reValidateOnLoad new in v1.2: true or false to determine whether or not to validate the selection when loading the form in EditForm. If this is set to true, you cannot have duplicates in the lookup list, and if you delete an item in the lookup list, the selected value will be invalid when you edit an item that has this value selected.
• allowAddNew new in v1.4: true or false to specify whether or not to allow adding new values to the “dataset”. If you set the below “isLookupInSelf” parameter to false, you MUST use the GUID in the parameter “listGuid” above.
• isLookupInSelf new in v1.4: Used with the above “allowAddNew” parameter. Use true or false to specify whether or not the autocomplete is a lookup in the the current list. Please note that setting this to false is only supported in SharePoint 2013. This will open a dialog for adding the new item.
• filterCAML new in v1.4.3: Add your own CAML here to prefilter the data-source. You can use an valid CAML – for example this to get items created by current user:

  "filterCAML":"<Eq><FieldRef Name='Author' LookupId='TRUE' /><Value Type='Integer'><UserID/></Value></Eq>",

• setFields: This in an array of objects containing additional fields to pull in and set based on the selection. It has these properties:
  • fromFIN: The FieldInternalName of the field in the list you are pulling from.
  • toFIN: The FieldInternalName of the field in the list you are writing to.
  • parseFunction: This is used to parse the returned value before inserting it in the “toFIN” field. See example on parsing a date value in the change log in the top of this page (February 19, 2016).
  • skipIfEmpty: true or false determines whether or not to skip this option if this field is empty.

Add this code below the form web part in NewForm and EditForm using a HTML form Web Part, Script Editor or link to a file containing the code from a Content Editor Web Part using the content link option.

<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/Autocomplete/spjs-autocomplete.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();

spjs.ac.peoplePicker({
	"applyTo":"Responsible",
	"forceOn2013":false,
	"helpText":"Enter name or email address...",
	"showField":"Title",
	"enforceUniqueValues":true, // New in v1.33
	"chooseFromUserGroup":null,
	"showUsersOnly":true,
	"rowLimit":5,
	"listOptionsOnFocus":false,
	"reValidateOnLoad":false,
	"setFields":[
		{
			"fromFIN":"EMail",
			"toFIN":"ResponsibleEmail",
			"parseFunction":"",
			"skipIfEmpty":false
		}
	]
});
	
</script>

The shared options are explained in the previous section.

• chooseFromUserGroup: If you want to limit the selection to a specific user group, add the name or the ID here. The ID must be added as an integer. Leave as null to search all users. Please note that you cannot let the autocomplete search among all users while the people picker itself (in the list settings) is restricted to a certain group.
• showUsersOnly: true or false determines whether or not to show users and groups, or users only.

Add this to the CEWP code (above the function call to spjs.ac.peoplePicker or spjs.ac.textField) to override the standard texts. Translate as you like.

spjs.ac.text = {
	"imgTitle":"The list of valid choices is updated automatically when you type",
	"noItems":"No items match your search",
	"addNewItem":"Add {0} to the list?",
	"noValidItems":"No valid items match your search",
	"invalid":"Invalid value",
	"moreItemsLabel":"Showing the first {0} items",
	"moreItemsMouseover":"Continue typing to narrow your search",
	"searching":"Searching for: "
};

To use this with DFFS you must add the script reference to “spjs-autocomplete.js” in the CEWP code for DFFS, and wrap the function call like this:

function dffs_Ready(){
	spjs.ac.peoplePicker({
		"applyTo":"Responsible",
		"helpText":"Enter name or email address...",
		"showField":"Title",
		"enforceUniqueValues":true, // New in v1.33
		"chooseFromUserGroup":null,
		"showUsersOnly":true,
		"rowLimit":5,
		"listOptionsOnFocus":false,
		"reValidateOnLoad":false,		
		"setFields":[
			{
				"fromFIN":"EMail",
				"toFIN":"ResponsibleEmail",
				"parseFunction":"",
				"skipIfEmpty":false
			}
		]
	});
}

You can also add the function call to the Custom JS section in the Misc tab. In this case you do not wrap it in dffs_Ready().

Post any bugs or feedback in the comments below.

Alexander

Change log

I got this request from Rudolf:

Hi Alexander,

Do you have any idea to solve the following problem I have?

We would like to upload formatted text or binary data from a file as an attachment to with an on the fly create form to enter the comment.
I read your blog to spjs-upload-for-sharepoint-custom-upload-page- ….

We would like to send this the comment and the attachments via a WebService to a SharePoint list to create a list item with attachments loaded.

Best Regards

The solution

I have created this solution that lets you add a list item with one or more attachments from a custom form that you can place anywhere in your SharePoint site.

You may also be interested in this solution SPJS Upload for SharePoint: Custom upload page for uploading documents to various document libraries in a site collection.

How to add this solution to a page

1. Download jQuery from here. Please note that you should use v1.x as v2.x does NOT support IE versions below 9.
2. Download spjs_utility.js from here
3. Download the files spjs_addItemWithAtt.css, spjs_addItemWithAtt.js and spjs_addItemWithAtt_CEWP.txt from here.
4. Upload all the files but spjs_addItemWithAtt_CEWP.txt to a document library in the site collection, or a folder created using SharePoint Designer on the root of the site collection.
5. Edit the file spjs_addItemWithAtt_CEWP.txt
   A. Update the path to the files you have uploaded
   
   B. Edit the argument object (starting at spjs.addItemWithAttachment.init({) to create the framework of your form using the guide described below.
   C. Save and Upload the file to the same location as the other files.
   D. Create a CEWP and refer the URL for the .txt file you just edited using the “Content link” option in the CEWP. DO NOT ADD THE CODE DIRECTLY IN THE CEWP AS HTML. You can also use the code directly in a HTML form Web Part in the page where you want the form to appear.

The arguments for the function

You call the function from the CEWP or the HTML Form Web Part using code like this:

spjs.addItemWithAttachment.init({
	"instanceID":"1",
	"listName":"{1a2bb561-c557-4a28-938f-0fb600b136d7}",
	"listBaseUrl":"",
	"header":"Add a comment",
	"text":{
		"saveBtn":"Save",
		"successMsg":"Saved successfully",
		"browserNotSupported":"Your browser is not supported."
	},
	"fields":
		[
			{
				"fin":"Title",
				"label":"Title",
				"type":"text",
				"required":true
			},
			{
				"fin":"Comment",
				"label":"Comment",
				"type":"note",
				"height":"100px",
				"required":true
			},
			{
				"fin":"Priority",
				"label":"Priority",
				"type":"choice",
				"required":true,
				"emptyLabel":"Set priority",
				"choices":[
					{"v":"0","f":"Priority = low"},
					{"v":"1","f":"Priority = med"},
					{"v":"2","f":"Priority = high"}
				]
			}
		],
	"attachements":true,
	"attLabel":"Attachments",
	"multiple":true
});

instanceID

An uniquer id for this instance. If you add more than one form the same page you must change this so that each instance is unique. In the CEWP code you find this div:

<div id="spjs_addItemWithAttachment_instanceID_1"></div>

This corresponds with the instanceID to form an unique placeholder where the custom form will be inserted.

listName

The list GUID or display name of the list to add the list item to.

listBaseUrl

The baseUrl of the site where the list is located. Use “” for the root site, or “/Sites/MySite” for a site named “MySite” on a managed path. This is NOT the URL of the list.

header

This is the text that goes above the form.

text

Various text used in the solution.

fields

Array of objects in this format:

{
"fin":"Title",
"label":"Title",
"type":"text",
"required":true
}

“fin”: The FieldIntenalName of the field in the list you are adding the items to.
“label”: The form label in the custom form you are creating.
“type”: Type of field. Supported types are “text”, “note” and “choice”.
“required”: true or false to control whether the field must be filled or not.

“height”: Sets the height of the textarea in pixels.

“emptyLabel”: Sets the default value in the dropdown select.
“choices”: Object format like this:

"choices":[
{"v":"0","f":"Priority = low"},
{"v":"1","f":"Priority = med"},
{"v":"2","f":"Priority = high"}
]

“v” is the value to store in the list and “f” is the displayed value in the dropdown select. These two can be the same.

attachements

true or false to allow or disallow attachments.

attLabel

The form label for the attachments.

multiple

true or false to allow for selecting multiple files.

Multiple forms in the same page

To have multiple forms in the same page, repeat the call to “spjs.addItemWithAttachment.init” and change the “instanceID”.

Let me know if you find any bugs, or you have any comments.

Alexander