2016-06-02 7 views
2

Я использую автозаполнение Google Адресов, и я просто хочу, чтобы он активировал событие клика на верхнем элементе в списке результатов, когда в поле формы размывается событие события, и существуют предложения.Автозаполнение Google Адресов - Нажмите первый результат на blur

var pac_input = document.getElementById ('pick-auto');

   (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" || type == "blur") { 
         var orig_listener = listener; 
         listener = function(event) { 
         var suggestion_selected = $(".pac-item-selected").length > 0; 
         var keyCode = event.keyCode || event.which; 
         if ((keyCode === 13 || keyCode === 9) && !suggestion_selected) { 
          var simulated_downarrow = $.Event("keydown", { 
          keyCode: 40, 
          which: 40 
          }); 
          orig_listener.apply(input, [simulated_downarrow]); 
         } else if(event.type === 'blur') { 
          pac_input.value = 
          $(".pac-container .pac-item:first-child").text(); 
          // $(".pac-container").delegate(".pac-item:first-child","click",function(){ 
          // console.log("success"); 
          // }); 

          $(".pac-container .pac-item:first-child").bind('click',function(){ 
           console.log("click"); 
          }); 

         } 
         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); 


       $(function() { 
        var autocomplete = new google.maps.places.Autocomplete(pac_input); 
       }); 
+0

post html please –

ответ

2

Попробуйте это:

DEMO: http://jsfiddle.net/q7L8bawe/

Добавить событие:

$("#pick-auto").blur(function (e) { 
     if (e.which == 13) { 
      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); 

         $(".pac-container .pac-item:first").addClass("pac-selected"); 
         $(".pac-container").css("display","none"); 
         $("#pick-auto").val(firstResult); 
         $(".pac-container").css("visibility","hidden"); 

       } 
      }); 
     } else { 
      $(".pac-container").css("visibility","visible"); 
     } 

    }); 
+1

Я хочу либо запустить событие клика, либо выбрать первое значение, а не только получить первый результат в тексте. on place_changed событие моя карта загружается по этому адресу. спасибо за ответ .. –

+0

1

В случае размытия, после того, как много потраченного времени я вычислял размытие выполняется до что-нибудь еще (например, имитируемое keydowns). Кроме того,

pac_input.value = $(".pac-container .pac-item:first-child").text(); 

$(".pac-container .pac-item:first-child").bind('click',function(){ 
    console.log("click"); 
}); 

это связывает текстовое значение, которое является ужасным для автозаполнения. Так в качестве альтернативы, я сделал это в еще части (размытие):

} else if (event.type == 'blur' && $(".pac-item").length > 0) { 
           var search = $('.pac-container:eq('+$scope.$index+') .pac-item:first-child').text(); 
           var autocompleteService = new google.maps.places.AutocompleteService(); 
           autocompleteService.getPlacePredictions({ 
            'input': search, 
            'offset': search.length, 
            'componentRestrictions': { 'country': 'ar' } 
           }, function listentoresult(list, status) { 
            if (list == null || list.length == 0) { 
             //error! 
            } else { 
             //do what u want with the first autocomplete, it is the first result that the service will give you. If you want the same result with places, you must ask for the placesServices from googleapi 
            } 
           }); 
          } 

Примечание:

$ (». Пак-контейнеровозы.: Экв ('+ $ сфера $ индекс +') .pac -item: первый ребенок.) текст()

Я использую эту причину, у меня есть несколько autocompletes и есть много Pac-контейнеров, но если у вас есть только один,

$ ('Pac-контейнер. .pac-item: first-child '). text()

shoul d достаточно.