| 12
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 
 | <html>
 
<head>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
	<link href="jquery.tagit.css" rel="stylesheet" type="text/css">	
</head>
 
<body>
 
	<p>This geotag demo uses the <strong>jQuery tag-it</strong> control and <strong>Google's AutocompleteService API</strong>.</p>
 
	<ul id="courseLocation">
	</ul>
 
	<input type="button" id="submit-button" value="Submit" />
 
	<ul id="result-list">
	</ul>
 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="tag-it.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>	
	<script type="text/javascript">
		$("#submit-button").click(function() {
			$("#result-list").empty();
			var tags = $("#courseLocation").tagit("assignedTags");
			for(var i=0; i<tags.length; i++)
				$("#result-list").append("<li>" + tags[i] + "</li>");
		});
		$(document).ready(function() {
			$("#courseLocation").tagit({
				allowSpaces: true,
				autocomplete: {
					delay: 0,
					minLength: 2,
					source: function(request, response) {
						var callback = function (predictions, status) {
							if (status != google.maps.places.PlacesServiceStatus.OK) {
								return;
							}					
							var data = $.map(predictions, function(item) {
								return item.description;
							});
							response(data);
						}		
						var service = new google.maps.places.AutocompleteService();
						service.getQueryPredictions({ input: request.term }, callback);
					}
				}
			});
		});
	</script>
</body>
 
</html> | 
Partager