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

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