2x google places autocomplete op 1 pagina
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)
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
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);
}
});
}
});
});
//$("#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);
}
});
}
});
});
