I got a request form Charlie on how to accomplish autocomplete for a single line text-field, reading the values from itself.
This solution resembles my Autocomplete for SharePoint people picker, but it pulls date into a single line text field.
As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
In addition to the above scripts, i have the jQuery UI 1.8 in a separate folder. See the CEWP code and point the links to your jQuery UI location.
The jQuery UI-library is found here. The pictures and the sourcecode refers to jquery-ui-1.8. The autocomplete widget is not found in previous releases.
The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.4.2.min. The autocomplete widget is not supported in previous releases.
The scripts “interaction.js” and “stringBuffer.js” is created by Erucy and published on CodePlex.
Add a CEWP below the list form in NewForm or EditForm, and insert this code:
<link type="text/css" href="../../jQueryUI18/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet"> <script type="text/javascript" src="../../jQueryUI18/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../../jQueryUI18/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript" src="../../Javascript/interaction.js"></script> <script type="text/javascript" src="../../Javascript/StringBuffer.js"></script> <script type="text/javascript"> fields = init_fields_v2(); /* Call autocomplete function with these parameters: sourceFIN: FieldInternalName of the field to query for the value targetFIN: FieldInternalName of the field to add the autocomplete to listName: List name or list GUID of the list to query listBaseUrl: The base url for the list to query. If on a managed path it must reflect this. */ setAutocompletefromQuery('Title','Title','0582CD60-C312-4483-996B-A15C27E332AA',''); function setAutocompletefromQuery(sourceFIN,targetFIN,listName,listBaseUrl){ var availableTags = []; wsBaseUrl = listBaseUrl + '/_vti_bin/'; var query = "<Where><IsNotNull><FieldRef Name='"+sourceFIN+"' /></IsNotNull></Where>"; var res = queryItems(listName,query,[sourceFIN]); // Build array of unique values - might be slow if list contains large amounts of data $.each(res.items,function(i,item){ var currVal = item[sourceFIN]; if($.inArray(currVal,availableTags)==-1){ availableTags.push(currVal); } }); // Add autocomplete $(fields[targetFIN]).find('input').autocomplete({ source: availableTags }); // Text size in dropdown $("body").css({'font-size':'65%'}); } /* LastMod: 07.05.2010 */ function init_fields_v2(){ var res = {}; $("td.ms-formbody").each(function(){ var myMatch = $(this).html().match(/FieldName="(.+)"s+FieldInternalName="(.+)"s+FieldType="(.+)"s+/); if(myMatch!=null){ // Display name var disp = myMatch[1]; // FieldInternalName var fin = myMatch[2]; // FieldType var type = myMatch[3]; if(type=='SPFieldNote'){ if($(this).find('script').length>0){ type=type+"_HTML"; } } if(type=='SPFieldLookup'){ if($(this).find('input').length>0){ type=type+"_Input"; } } // Build object res[fin] = this.parentNode; res[fin].FieldDispName = disp; res[fin].FieldType = type; } }); return res; } </script>
Ask if anything is unclear.
Alexander
I am so close!
I did a test on a list with just a Title field (to keep it simple) and pre-added a few list items.
I downloaded the jQuery UI8, and changed the CEWP to match my paths for the CSS and the js files, as well as my list field (‘Title’, ‘Title’,’my list guid here,”.
I added the CEWP to my newform.aspx below the form contents.
I can see the hourglass flash quickly for each letter I type, so I know I am close!!
I tested the jQuery loads, by placing your alert script below each javascript library call, and get 4 perfect “function” alerts.
I tried adding my path to get to the list (like http://mysite.com/sites/sitename – which is what normally proceeds /_vti_bin/ ) and still nothing.
Any thoughts?
Hi, did you specify the paramenter “listBaseUrl” to reflect your managed path?
If you insert an alert between line 23 and 24 like this:
alert(res.count);
and it alerts -1, something is wrong with the listName (or GUID) or the listBaseUrl.
Alexander
Hi Alexander:
We have a holiday weekend coming up. I will try this next week. Thank you so much!!
Charlie
All working fine – another great script – cheers Alexander!
what if I need a multiselect field?
Hi,
Look here for the jQueryUI reference.
Alexander
To start, this is a great script. Thank you!
All works fine when I implement it on a default form, however something goes wrong once I create a custom form in SP Designer. Looking at the form page’s generated HTML, it no longer includes the fieldName, which is what the targetFIN in your code is looking for. Has anybody else had an issue with this on custom forms?
Look at this article
Alexnader
Thank you very much! Adding the IDs and the code change in the link you sent worked great!
Alexander, if you have a chance, can you update this script to remove the dependence on stringbuffer and interaction.js? Or, maybe you could roll this into DFFS? Thanks!