Google地圖自動完成功能始終選擇第一項

Question

我正在使用Google地圖位置V3自動填充功能。我想要有一個功能，如果用戶開始在搜索字段中輸入內容，自動完成下拉菜單中的第一項會自動選中。

與Facebook中的搜索功能類似。

我已經與這2個線程的幫助更新了谷歌地圖自動完成：

• Google Autocomplete - enter to select

• Google maps Places API V3 autocomplete - select first option on enter

但我不能找到這個新問題的解決方案...

我張貼在這裏我的代碼： http://jsfiddle.net/Chazz09/YfPv3/5/

$(document).ready(function(){ 
    var pac_input = document.getElementById('searchfield'); 
    // prevents enter key to submit form//  
    $('#searchfield').keydown(function (e) { 
    if (e.which == 13 && $('.pac-container:visible').length) return false; 
    }); 
    // prevents enter key to submit form// 

    (function pacSelectFirst(input){ 
    // store the original event binding function 
    var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent; 

    function addEventListenerWrapper(type, listener) { 
     // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected, 
     // and then trigger the original listener. 

     if (type == "keydown") { 
     var orig_listener = listener; 
     listener = function (event) { 
      var suggestion_selected = $(".pac-item.pac-selected").length > 0; 
      if (event.which == 13 && !suggestion_selected) { 
      var simulated_downarrow = $.Event("keydown", {keyCode:40, which:40}) 
      orig_listener.apply(input, [simulated_downarrow]); 
      } 

      orig_listener.apply(input, [event]); 
     }; 
     } 

     // add the modified listener 
     _addEventListener.apply(input, [type, listener]); 
    } 

    if (input.addEventListener) 
     input.addEventListener = addEventListenerWrapper; 
    else if (input.attachEvent) 
     input.attachEvent = addEventListenerWrapper; 

    })(pac_input); 

    $(document).ready(function() 
        { 
    function initialize() { 
     var options = { 
     types: ['geocode'], 
     componentRestrictions: {country: "fr"} 
     }; 
     var autocomplete = new google.maps.places.Autocomplete(pac_input, options); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    }); 
}); 

Answer 1

試試這個代碼...你的列表打開的時候..

$('#yourAddressTextBox').val($('.pac-container').find('.pac-item').eq(0).text()); 

您的keydown功能：

$('#searchfield').keydown(function (e) { 
setTimeout(function(){ 
    $('#searchfield').val($('.pac-container').find('.pac-item').eq(0).text());},1000); 
    if (e.which == 13 && $('.pac-container:visible').length) return false; 
}); 

Answer 2

這個怎麼樣？

$("input").keypress(function(event){ 
      if(event.keyCode == 13 || event.keyCode == 9) { 
       $(event.target).blur(); 
       if($(".pac-container .pac-item:first span:eq(3)").text() == "") 
        firstValue = $(".pac-container .pac-item:first .pac-item-query").text(); 
       else 
        firstValue = $(".pac-container .pac-item:first .pac-item-query").text() + ", " + $(".pac-container .pac-item:first span:eq(3)").text(); 
       event.target.value = firstValue; 

      } else 
       return true; 
});