Google商家信息自動填充功能，如果它是唯一可見選項，則強制選擇第一個選項

我目前正在使用Google商家信息自動填充，並取得了巨大成功。我想要做的是強制選擇自動完成列表中的第一個選項，但只有在只顯示一個選項的情況下。Google商家信息自動填充功能，如果它是唯一可見選項，則強制選擇第一個選項

我不喜歡在顯示很多選項時強制選擇第一個選項的想法。今天我注意到，一個大型的英國房地產網站Rightmove強迫我請求相同的行爲。這似乎更多的用戶友好的方法。

我已經搜索了所有關於SO的問題，並且之前沒有詢問過。有誰知道如何編碼？

2015-02-10 luke_mclachlan

我的解決方案

<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 

 
    <title>Place Autocomplete</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
    <script src="https://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script> 
 

 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&amp;language=en" type="text/javascript"></script> 
 

 
    <script type="text/javascript"> 
 
    
 
     var autocomplete; 
 
     var place; 
 

 
     function initialize() 
 
     { 
 
     var options  = {types: ['(cities)']}; 
 
     var input   = document.getElementById('searchTextField'); 
 
     
 
     autocomplete = new google.maps.places.Autocomplete(input, options); 
 

 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
      fillInPlace(); 
 
     }); 
 
     } 
 

 
     function fillInPlace() { 
 
     place = autocomplete.getPlace(); 
 
     var $address = $(place['adr_address']); 
 
     $('#resultTextField').val($address.text()); 
 
     } 
 

 
     $(document).on('ready', function(){ 
 
      $("#searchTextField").on('focusout', function(e){ 
 
       setTimeout(function() { 
 
        $("#searchTextField").val(''); 
 
       }, 1000); 
 
      }); 
 
     }) 
 
     
 
     google.maps.event.addDomListener(window, 'load', initialize); 
 

 
    </script> 
 
</head> 
 

 
<body> 
 
    <form class='form'> 
 
    <div class="form-group"> 
 
     <div class="col-xs-12"> 
 
     <label for="searchTextField">City</label> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <input id="searchTextField" type="text" placeholder="Search" autocomplete="on" class='form-control pull-left' style='width:40%; margin-right:3px;'> 
 
     <input id="resultTextField" type="text" placeholder="" autocomplete="on" class='form-control pull-left' disabled='disabled' style='width:55%'> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

來源

2015-03-29 18:41:14

Google商家信息自動填充功能，如果它是唯一可見選項，則強制選擇第一個選項

回答

相關問題