SharePoint 2010 autocomplete textbox containing listitems

Request:

A simple textbox where users type in a certain value. based on the this value,a suggestion appears by searching the values of a specific field in a specified list.
The solution has to be easy to maintain, performance is very important (more than 100 000 items) and it has to support all the browsers that SharePoint 2010 supports.
finally, it has to be a sandbox solution.

Solution:

Used technologies:

  • out-of-the-box SharePoint 2010 REST Services
  • JQuery & JQuery UI

Code:


<script language="ecmascript" type="text/ecmascript">

// Settings
var url = "http://vwds242/_vti_bin/listdata.svc/Large()";
var field = "Title";

// Onload
$(document).ready(function () {
	$("#tags").autocomplete({
		source: function (req, add) {
			var suggestions = search(req.term, url, field);
			add(suggestions);
		}
	});
});

// Search all the listitems by using the REST Service
// Value is the text that needs to be used in the query
// listurl is the listdata.svc url withouth the filter params
// field is the name of the field where the value in exists
function search(value, listurl, field) {
	var coll = new Array();
	var url =
		listurl + "?$filter=startswith(" + field + ",'" + value + "')";

	$.ajax({
		cache: true,
		type: "GET",
		async: false,
		dataType: "json",
		url: url,
		success: function (data) {
			var results = data.d.results;
			for (att in results) {
				var object = results[att];
				for (attt in object) {
					if (attt == field) {
						coll.push(object[attt]);
					}
				}
			}
		}
	});
	return coll
}
</script>
	
VN:F [1.9.22_1171]
Rating: 8.2/10 (28 votes cast)
VN:F [1.9.22_1171]
Rating: +5 (from 9 votes)
SharePoint 2010 autocomplete textbox containing listitems, 8.2 out of 10 based on 28 ratings