Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

SharePoint list field and Geonames with autocomplete — April 21, 2010

SharePoint list field and Geonames with autocomplete

If you working with a SharePoint Designer customized NewForm page (NewForm.aspx) and you want to use autocomplete for one of the fields, in this example (city) in your form with a city, you can use a webservice from Geonames, getting the data with JSONP and use the new autocomplete widget included in jQuery that generates the Ajax call needed for autocomplete. You can also use autocomplete with a webservice to populate a form field from another data source, for example a SharePoint list.

Ok, so how to do this? First of all, grab the latest jQuery UI (1.8) that includes the autocomplete widget. Download it here. http://jqueryui.com/
Open SharePoint Designer and the NewForm. In the design view, select the form field City and look for ID below the misc section in the tag properties task pane. You should now find the ID: ff2_1, in this example.

Geocode

Paste the following code below the ContentPlaceHolderId PlaceHolderMain:

 



<link type="text/css" href="ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/jquery-1.4.1.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="demos.css" rel="stylesheet" />

<style>
.ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; }
#city { width: 27em; }
#ff2 { width: 24em; }
</style>

<script type="text/javascript">
$(function() {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}

//Check the task pane Tag Properties to find the ID, in this case ff2_1  
$("#[id*='ff2_1']").autocomplete({
source: function(request, response) {
$.ajax({
url: "<a href="http://ws.geonames.org/searchJSON">http://ws.geonames.org/searchJSON</a>",
dataType: "jsonp",
data: {
//P = City
featureClass: "P",
style: "full",
// If you need to filter on one or more specific country: use country: 'US', or two contries country:'SE,US'
//country: 'US',
maxRows: 10,

name_startsWith: request.term
},
success: function(data) {
response($.map(data.geonames, function(item) {
return {

//Label
//city, area, country
//label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,

label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,

//city, area (useful if only one country)
//label: item.name + (item.adminName1 ? ", " + item.adminName1 : ""),       

//VALUE
//To be displayed in the formfield, this will only get country
//value: item.countryName

//If you want populate: Stockholm, Sweden
//value: item.cityName

//Default (only city)    
value: item.name

}
}))
}
})
},
minLength: 1,
select: function(event, ui) {
log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>


Geonames can be customized the in many ways, read my inline comments for some examples of things you can modify. Read more about all the parameter settings and more here: Geonames reference