Autocomplete for single line of text

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”):
IMG

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.

Read here how to add a CEWP to the NewForm or EditForm, how to find the list Guid of your list, and how to find the FieldInternalName of your columns.

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

11 Comments on “Autocomplete for single line of text

  1. 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?

    1. 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

  2. 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?

  3. 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!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.