Bản đồ Google Địa điểm API V3 tự động hoàn tất - chọn tùy chọn đầu tiên khi nhập (và giữ nguyên cách này)

Question

Câu hỏi này liên quan đến câu trả lời cho câu hỏi này: Google maps Places API V3 autocomplete - select first option on enter. Về cơ bản, nó là làm cho trường sử dụng đề xuất đầu tiên từ danh sách tự động hoàn tất khi người dùng nhấn enter. Câu trả lời cho câu hỏi đó có jsfiddle - http://jsfiddle.net/dodger/pbbhH/ - hoạt động ngoại trừ khi trường văn bản mất tiêu điểm, giá trị trường trả về giá trị được nhập một phần.

Ví dụ: người dùng nhấp vào trường nhập và nhập 'bò', hộp tự động hoàn tất bật lên với một số đề xuất và người dùng nhấn enter. Bản đồ sau đó được thay đổi để hiển thị vị trí của mục đầu tiên từ hộp tự động hoàn thành (có điểm đánh dấu) và giá trị của trường nhập được thay đổi thành mục đầu tiên từ hộp tự động điền. Sau đó, người dùng nhấp vào một nơi nào đó bên ngoài trường và giá trị của trường nhập sẽ trả về 'ox'.

Tôi muốn giá trị của trường nhập để giữ nguyên đề xuất tự động hoàn thành đầu tiên.

Answer 1

Hãy thử điều này: http://jsfiddle.net/pbbhH/60/

Về cơ bản trừu tượng logic lựa chọn vào một chức năng mới selectFirstResult(). Sau đó, gọi chức năng này trên cả hai nhấn enter và mất tập trung vào văn bản.

function selectFirstResult() { 
    infowindow.close(); 
    var firstResult = $(".pac-container .pac-item:first").text(); 

    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({"address":firstResult }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var lat = results[0].geometry.location.lat(), 
       lng = results[0].geometry.location.lng(), 
       placeName = results[0].address_components[0].long_name, 
       latlng = new google.maps.LatLng(lat, lng); 

      moveMarker(placeName, latlng); 
      $("input").val(firstResult); 
     } 
    }); 
} 

EDIT: thực hiện thay đổi nhỏ mỗi @ bình luận của Ben bên dưới.

Answer 2

Điều này đúng nhưng nếu bạn nhấn enter và bạn đã chọn mục, mục này sẽ chọn mục đầu tiên. Vì vậy, hãy sử dụng mã này:

function selectFirstResult() { 
infowindow.close(); 
if ($('.pac-selected').lenght < 0){ // this line 

var firstResult = $(".pac-container .pac-item:first").text(); 
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({"address":firstResult }, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     var lat = results[0].geometry.location.lat(), 
      lng = results[0].geometry.location.lng(), 
      placeName = results[0].address_components[0].long_name, 
      latlng = new google.maps.LatLng(lat, lng); 

     moveMarker(placeName, latlng); 
     $("input").val(firstResult); 
    } 
}); 
} 
}