2x google places autocomplete op 1 pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

N K

N K

08/12/2014 16:32:58
Quote Anchor link
Ik zou graag twee input velden willen hebben die dezelfde waardes weergeven van de google places API.
Dit lukt met 1 input element maar nog niet met twee. Ik moet m.i. het tweede input element een andere id geven anders werkt het niet. Ook zou ik denk ik de autocomplete voor dit element opnieuw moeten initialiseren.
Onderstaande code werkt. Hoe zou ik ook het tweede input element kunnen verwerken in onderstaande code?

var pac_input = document.getElementById('city'); --> is het id van het eerste input element.
De tweede zou city2 moeten heten...

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
$(document).ready(function () {
    //$("#center_container").fadeIn(2000);
    var pac_input = document.getElementById('city');

(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-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);
     var options = {
        types: ['(cities)'],
        componentRestrictions: {country: "NL"}
       };
    var place;
    var autocomplete = new google.maps.places.Autocomplete(pac_input, options);
    
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        place = autocomplete.getPlace();
    });
    $('#city').keyup(function(event) {
        if (event.keyCode == 13) {
         $("#search_form").submit();
        var lat = place.geometry.location.lat();
        var lon = place.geometry.location.lng();
        var arrAddress = place.address_components;
        var city;
        arrAddress.forEach(function (address_component) {
        if (address_component.types[0] == "locality"){
            city = address_component.long_name;
          }
        });
        var operator = '>=';
        var date = $('#s_date').val();
        $('.icon-search').hide();
        
        $('#s_load').show();
        
        $.ajax({
                type: "POST",
                data:({lat:lat, lon:lon, city:city, operator:operator, start_submit:date}),
                cache: false,
                url: "./ajax/content.php",
                success: function (data) {
                $("#result_box").html(data);        
                }
            });
    
    }
    });
    });
 
PHP hulp

PHP hulp

18/06/2024 12:00:53
 
N K

N K

10/12/2014 21:25:06
Quote Anchor link
iemand?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.