You find updated documentation here
Change log
Always test a new version to see that it works as expected before adding it to a production environment.
May 19, 2016
I have released v1.4.3 with a new feature that lets you pre-filter the data-source with a CAML query. To do this, add a new key-value pair to the argument object like this (see more details below):
"filterCAML":"<Eq><FieldRef Name='Author' LookupId='TRUE' /><Value Type='Integer'><UserID/></Value></Eq>"
This example will show only items created by current user. You can provide any valid CAML.
March 20, 2016
I have released v1.41 with this bugfix:
I have fixed a bug occurring when using the new option to add new values to the lookup list, and it is a “isLookupInSelf”. If you had already moved the cursor away from the autocomplete field so the field had the “error class”, going back to add it to the list did not clear this class so it appeared as if the error was still there. The value would however be saved to the list as it should.
February 19, 2016
I have released v1.4 with these new features:
- Added option to add a custom function to parse the returned value before setting it using the “setFields” option. Here is an example (see parseFunction):
spjs.ac.textField({
"applyTo":"Project",
"helpText":"Project name or number...",
"listGuid":"ProjectList",
"listBaseUrl":"/DFFS",
"showField":"Title",
"enforceUniqueValues":true, // New in v1.33
"rowLimit":15,
"listOptionsOnFocus":false,
"reValidateOnLoad":false,
"allowAddNew":false, // New in v1.4
"isLookupInSelf":true, // New in v1.4
"setFields":[
{
"fromFIN":"ProjectNumber",
"toFIN":"PNumber",
"parseFunction":"",
"skipIfEmpty":false
},
{
"fromFIN":"Created",
"toFIN":"ProjectCreatedDate",
"parseFunction":"parseDateFunc",
"skipIfEmpty":false
}
]
});
// This function converts the ISO8601 date returned from the query to a format ready for inserting in the field
function parseDateFunc(a){
// Set the desired format in the variable "f"
var f = "MM/dd/yyyy hh:mm" , d = new Date(a);
f = f.replace("MM",(d.getMonth()+1) < 10 ? "0"+(d.getMonth()+1) : (d.getMonth()+1));
f = f.replace("dd",d.getDate() < 10 ? "0"+d.getDate() : d.getDate());
f = f.replace("yyyy",d.getFullYear());
f = f.replace("yy",d.getFullYear().toString().substring(2));
f = f.replace("hh",d.getHours() < 10 ? "0"+d.getHours() : d.getHours());
f = f.replace("mm",d.getMinutes() < 10 ? "0"+d.getMinutes() : d.getMinutes());
return f.split(/ |:/);
}
- Added option to add new items to the autocomplete if you cannot find a match. Please look at the description of the parameters “allowAddNew” and “isLookupInSelf” below.
The autocomplete solution is part of the DFFS package, and you will find updated versions in the “plugins” folder in the DFFS download package, or in the “incrementalReleases” folder. Get the files here
February 09, 2016
I have released v1.33 with support for returning only unique values. You set this up in the argument object like this:
spjs.ac.textField({
"applyTo":"Project",
...
"enforceUniqueValues":true, // New
...
...
The autocomplete solution is part of the DFFS package, and you will find updated versions in the “plugins” folder in the DFFS download package, or in the “incrementalReleases” folder. Get the files here
October 31, 2014
v1.31:
Fixed a bug with using single quotes in the lookup field.
May 1, 2014
v1.21:
Added event triggering for the fields set by “setFields” in the autocomplete function call – for use with DFFS “is changed” trigger.
April 25, 2014
v1.2:
- Added option to prevent validation of the selected value on load. This will allow for duplicate entries in the lookup list. See function call example below for details.
- Fixed a bug that prevented a selected people picker form being cleared.
April 6, 2014
v1.1: Added option to bypass the SP2013 check when applying the people picker autocomplete in SP2013. This must only be used when having SP2010 style people pickers with the “validate user” and “address book” icons.
To use this option, change the argument object like this:
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.
How to set it up
- If you don’t have jQuery already, get it here
- Get the latest version of spjs-utility.js from here.
- Download the file “spjs-autocomplete.js” from here.
- Add the code below the form in NewForm and EditForm as described below.
Setup for a single line of text column
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>
Options explained:
Setup for a single choice people picker
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>
Options explained:
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.
Override the labels and text
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: "
};
How to use this with DFFS
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
Like this:
Like Loading...
