【发布时间】：2011-11-12 00:24:05
【问题描述】：
我不擅长 jQuery 和 Javascript。我想使用这个现有的代码，让它以邮政格式向用户提供完整的地址......就像你放在信函或联邦快递信封上一样。
用户开始在地址框中键入地址，然后 jQuery 自动完成启动。当用户看到完整的地址时，他们然后单击地址，我希望它然后用用户选择传播一个测试框，但是在邮政格式。
这是 HTML 页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get Address Details</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery-ui-1.8.7.min.js"></script>
<script src="js/jquery.ui.addresspicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#address1" ).addresspicker({
elements: {
locality: '#city',
lat: '#lat',
lng: '#lng',
country: '#country'
}
});
});
</script>
</head>
<body>
<form action="submit.php" method="post">
<fieldset style="width: 300px; margin-bottom: 100px;"><legend>begin typing address</legend>
<label for="address1">Input Address: </label><input name="address1" id="address1" type="text"><br /></fieldset>
<fieldset style="width: 300px; text-align: right;"><legend>see results here</legend>
<label for="address2">Street Address: </label><input name="address2" id="address2" type="text"><br />
<label for="lat">Lat: </label><input name="lat" id="lat" type="text"><br />
<label for="lng">Lng: </label><input name="lng" id="lng" type="text"><br />
<label for="city">City: </label><input name="city" id="city" type="text"><br />
<label for="country">Country: </label><input name="country" id="country" type="text"><br /><br />
<label for="postal">Postal Address: </label><textarea name="postal" id="postal" ></textarea><br />
</fieldset>
</form>
</body>
</html>
地址选择器的javascript页面如下，其他js页面为当前版本
/*
* jQuery UI addresspicker @VERSION
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Progressbar
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.autocomplete.js
*/
(function( $, undefined ) {
$.widget( "ui.addresspicker", {
options: {
appendAddressString: "",
mapOptions: {
zoom: 5,
center: new google.maps.LatLng(46, 2),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
elements: {
map: false,
lat: false,
lng: false,
locality: false,
country: false
},
draggableMarker: true
},
marker: function() {
return this.gmarker;
},
map: function() {
return this.gmap;
},
updatePosition: function() {
this._updatePosition(this.gmarker.getPosition());
},
reloadPosition: function() {
this.gmarker.setVisible(true);
this.gmarker.setPosition(new google.maps.LatLng(this.lat.val(), this.lng.val()));
this.gmap.setCenter(this.gmarker.getPosition());
},
selected: function() {
return this.selectedResult;
},
_create: function() {
this.geocoder = new google.maps.Geocoder();
this.element.autocomplete({
source: $.proxy(this._geocode, this),
focus: $.proxy(this._focusAddress, this),
select: $.proxy(this._selectAddress, this)
});
this.lat = $(this.options.elements.lat);
this.lng = $(this.options.elements.lng);
this.locality = $(this.options.elements.locality);
this.country = $(this.options.elements.country);
if (this.options.elements.map) {
this.mapElement = $(this.options.elements.map);
this._initMap();
}
},
_initMap: function() {
if (this.lat && this.lat.val()) {
this.options.mapOptions.center = new google.maps.LatLng(this.lat.val(), this.lng.val());
}
this.gmap = new google.maps.Map(this.mapElement[0], this.options.mapOptions);
this.gmarker = new google.maps.Marker({
position: this.options.mapOptions.center,
map:this.gmap,
draggable: this.options.draggableMarker});
google.maps.event.addListener(this.gmarker, 'dragend', $.proxy(this._markerMoved, this));
this.gmarker.setVisible(false);
},
_updatePosition: function(location) {
if (this.lat) {
this.lat.val(location.lat());
}
if (this.lng) {
this.lng.val(location.lng());
}
},
_markerMoved: function() {
this._updatePosition(this.gmarker.getPosition());
},
// Autocomplete source method: fill its suggests with google geocoder results
_geocode: function(request, response) {
var address = request.term, self = this;
this.geocoder.geocode( { 'address': address + this.options.appendAddressString}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
for (var i = 0; i < results.length; i++) {
results[i].label = results[i].formatted_address;
};
}
response(results);
})
},
_findInfo: function(result, type) {
for (var i = 0; i < result.address_components.length; i++) {
var component = result.address_components[i];
if (component.types.indexOf(type) !=-1) {
return component.long_name;
}
}
return false;
},
_focusAddress: function(event, ui) {
var address = ui.item;
if (!address) {
return;
}
if (this.gmarker) {
this.gmarker.setPosition(address.geometry.location);
this.gmarker.setVisible(true);
this.gmap.fitBounds(address.geometry.viewport);
}
this._updatePosition(address.geometry.location);
if (this.locality) {
this.locality.val(this._findInfo(address, 'locality'));
}
if (this.address) {
this.address.val(this._findInfo(address, 'address'));
}
if (this.country) {
this.country.val(this._findInfo(address, 'country'));
}
},
_selectAddress: function(event, ui) {
this.selectedResult = ui.item;
}
});
$.extend( $.ui.addresspicker, {
version: "@VERSION"
});
// make IE think it doesn't suck
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i<this.length; i++){
if(this[i]==obj){
return i;
}
}
return -1;
}
}
})( jQuery );
【问题讨论】：
标签： jquery autocomplete geocode picker street-address