i'm building my first real site and among other things i'm trying to implement a field where users can select a location (using autocomplete to make sure that they are correct) . I came across this perfect choise http://jqueryui.com/demos/autocomplete/#remote-jsonp. I have never used json or jquery so i tried to copy-paste the given code to see how it works and see if it is good for me or i need to make any changes. But when i try it the auto complete does not work.I guess i miss something when i reference the jquery at the beginning but i don't know what.I suppose the answer is something really simple i've misunderstood but if anyone could help me i'd be grateful.This is the code i'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="jqueryui.com/themes/base/jquery.ui.all.css">
<script src="jqueryui.com/jquery-1.7.2.js"></script>
<script src="jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="jqueryui.com/demos/demos.css">
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
#city { width: 25em; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2,
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>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city" />
Powered by <a href="http://geonames.org">geonames.org</a>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
</div><!-- End demo-description -->
</body>
</html>
You are going to need to reference your script files from a local domain or from a CDN (jQueryUI is not allowing you to download their script references from your HTML page). To just get things working, I would recommend using a CDN to load jQuery, jQueryUI, and a theme.
So try replacing your script tags (jQuery and jQueryUI references) with the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>
And replace your CSS references (link rel='stylesheet') with the theme on the CDN:
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css' />
From there you can customize which pieces of jQueryUI you'd like to use on the download page and reference the JS file that's built from your application.