3

我正在使用Google地图位置V3自动填充功能。我想要有一个功能,如果用户开始在搜索字段中输入内容,自动完成下拉菜单中的第一项会自动选中。Google地图自动完成功能始终选择第一项

与Facebook中的搜索功能类似。

我已经与这2个线程的帮助更新了谷歌地图自动完成:

但我不能找到这个新问题的解决方案...

我张贴在这里我的代码: 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); 
    }); 
}); 

回答

0

试试这个代码...你的列表打开的时候..

$('#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; 
}); 
+0

感谢您的建议,但我无法让它正常工作。也许我做错了什么。你测试了你的代码吗? – Chazz

+0

请把你的代码我片段 –

+0

我试图把你的片段在不同的地方, 因此,没有我addded一种功能,当列表(的.pac-containter)可见: 如果($(“PAC-容器。”! ).is(':visible')){ $('#searchfield')。val($('。pac-container')。find('。pac- item')。eq(0).text() ); } 但还是没有成功,我的代码可能是incorrent。 张贴在这里的代码:http://jsfiddle.net/Chazz09/YfPv3/15/ – Chazz

1

这个怎么样?

$("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; 
}); 
相关问题