레일 : Google 지역 정보 데이터베이스를 사용하여 자동 완성하려면 어떻게해야하나요?

내 애플리케이션에 Google 지역 정보 자동 완성 API 사용을위한 자동 완성 (입력란 아래에 사용자 유형으로 업데이트)이 필요한 주소 입력란이 있습니다. 지금, 모델에있는 필드를 기반으로 단어를 자동 완성하는 보석을 보았습니다. 모델에있는 모든 주소를 로컬에 저장할 수 없기 때문에 나를 위해 일하지 않습니다.레일 : Google 지역 정보 데이터베이스를 사용하여 자동 완성하려면 어떻게해야하나요?

필자는 자동 완성 입력 문자열이 주어 졌을 때 추천 목록을 반환하는 보석을 시도했지만 입력 변경 사항을 반영하여 좋은 형식으로 표시하는 방법을 동적으로 업데이트하는 방법을 알지 못합니다.

누군가 내가 사용할 보석의 개요를 알려주고이 작업을 어떻게 수행해야합니까? google_places_autcomplete gem으로 미리 정의 된 주소를 사용하여 자동 제안 제안을 표시 할 수 있습니다. 이는 수동으로 JSON을 구문 분석 할 필요가 없음을 의미합니다.

출처

2011-07-28 Ankit Soni

Google 지역 정보 자바 스크립트 라이브러리를 통해 직접 볼 수 있습니다. https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

: 다른 예로,

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place Autocomplete Address Form</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
    <script> 
// This example displays an address form, using the autocomplete feature 
// of the Google Places API to help users fill in the information. 

var placeSearch, autocomplete; 
var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    country: 'long_name', 
    postal_code: 'short_name' 
}; 

function initialize() { 
    // Create the autocomplete object, restricting the search 
    // to geographical location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
     { types: ['geocode'] }); 
    // When the user selects an address from the dropdown, 
    // populate the address fields in the form. 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    fillInAddress(); 
    }); 
} 

// [START region_fillform] 
function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
    document.getElementById(component).value = ''; 
    document.getElementById(component).disabled = false; 
    } 

    // Get each component of the address from the place details 
    // and fill the corresponding field on the form. 
    for (var i = 0; i < place.address_components.length; i++) { 
    var addressType = place.address_components[i].types[0]; 
    if (componentForm[addressType]) { 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
    } 
    } 
} 
// [END region_fillform] 

// [START region_geolocation] 
// Bias the autocomplete object to the user's geographical location, 
// as supplied by the browser's 'navigator.geolocation' object. 
function geolocate() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var geolocation = new google.maps.LatLng(
      position.coords.latitude, position.coords.longitude); 
     autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, 
      geolocation)); 
    }); 
    } 
} 
// [END region_geolocation] 

    </script> 

    <style> 
     #locationField, #controls { 
     position: relative; 
     width: 480px; 
     } 
     #autocomplete { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     width: 99%; 
     } 
     .label { 
     text-align: right; 
     font-weight: bold; 
     width: 100px; 
     color: #303030; 
     } 
     #address { 
     border: 1px solid #000090; 
     background-color: #f0f0ff; 
     width: 480px; 
     padding-right: 2px; 
     } 
     #address td { 
     font-size: 10pt; 
     } 
     .field { 
     width: 99%; 
     } 
     .slimField { 
     width: 80px; 
     } 
     .wideField { 
     width: 200px; 
     } 
     #locationField { 
     height: 20px; 
     margin-bottom: 2px; 
     } 
    </style> 
    </head> 

    <body onload="initialize()"> 
    <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" 
      onFocus="geolocate()" type="text"></input> 
    </div> 

    <table id="address"> 
     <tr> 
     <td class="label">Street address</td> 
     <td class="slimField"><input class="field" id="street_number" 
       disabled="true"></input></td> 
     <td class="wideField" colspan="2"><input class="field" id="route" 
       disabled="true"></input></td> 
     </tr> 
     <tr> 
     <td class="label">City</td> 
     <td class="wideField" colspan="3"><input class="field" id="locality" 
       disabled="true"></input></td> 
     </tr> 
     <tr> 
     <td class="label">State</td> 
     <td class="slimField"><input class="field" 
       id="administrative_area_level_1" disabled="true"></input></td> 
     <td class="label">Zip code</td> 
     <td class="wideField"><input class="field" id="postal_code" 
       disabled="true"></input></td> 
     </tr> 
     <tr> 
     <td class="label">Country</td> 
     <td class="wideField" colspan="3"><input class="field" 
       id="country" disabled="true"></input></td> 
     </tr> 
    </table> 
    </body> 
</html>

출처 :이 예제를 확인

출처

2014-07-13 07:24:45

레일 : Google 지역 정보 데이터베이스를 사용하여 자동 완성하려면 어떻게해야하나요?

답변

관련 문제