Я использую API автозаполнения Google Place для поиска городов во входных данных, и я использовал автозаполнение jquery, чтобы искать в моей базе данных и проверять отели, в которых я хранил ее.
Как видите, в отелях есть значок дома.
Дело в том, что мне удалось провести этот совместный поиск, но когда я нажимаю на одну из гостиниц, она ничего не делает. Раскрывающийся список исчезает, и нет способа собрать событие click. С другой стороны, если я нажимаю на любое из направлений, которые автозаполнения Google, он работает правильно. Я оставляю свой код здесь:
HTML:
<input id="accommodation-name" type="text" class="textfield form-control" placeholder="Indica un destino, alojamiento…" />
Jquery Автозаполнение:
$("#accommodation-name").autocomplete({
delay: 300,
source: "url/to/ajax/autocomplete",
response: function( event, ui ) { // cada vez que se escribe una letra
// Elimino los valores antes de insertas los nuevos
$(".pac-container #areasearch").each(function(){
$(this).remove();
});
// Inserto los nuevos valores
for (var i = 0; i < ui.content.length; i++) {
if(ui.content[i].type == "acom"){
var inner_html = '<div id="areasearch" class="pac-item" onclick="setAccommodation(\''+ui.content[i].title+'\')"><span class="glyphicon glyphicon-home"></span><span class="pac-item-query"><b>'+ui.content[i].title+'</b></span> <span>'+ui.content[i].town+'</span></div>';
$(".pac-container").prepend(inner_html);
}
}
}
});
Автозаполнение Google Place:
function initialize() {
var options = {
types: ['geocode'],
componentRestrictions: {country: "es"}
};
var input = document.getElementById('accommodation-name');
var autocomplete = new google.maps.places.Autocomplete(input, options);options);
}
google.maps.event.addDomListener(window, 'load', initialize);
Я создал функцию setAccommodation (), которая не выполняется, несмотря на то, что она помещена в атрибут onclick:
function setAccommodation(name){
console.log(name);
$("#accommodation-name").val(name);
}
И событие клика:
$("pac-container div").click(function(){
alert(123);
});
При всем этом, когда вы нажимаете на одну из гостиниц, которые я включил в список "pac-container", абсолютно ничего не происходит. Автозаполнение закрыто, и ни функция, ни событие щелчка не выполняются.
Чтобы закончить, я оставляю пример данных, которые я получаю при вызове ajax, который у меня есть в моем контроллере, который получает приспособления:
[
{
"type":"acom",
"id":3,
"title":"Don Claudio",
"town":"Bilbao, Bizkaia",
"lat":"43.27779",
"long":"-2.97325",
"url":"pensiondonclaudio",
"category":"Alojamiento",
},
{
"type":"acom",
"id":20,
"title":"Udondo",
"town":"Derio, Bizkaia",
"lat":"43.2921316",
"long":"-2.888667899999973",
"url":"hostal-udondo",
"category":"Alojamiento",
}
]
решаемые
Решение
В конце концов это оказалось проще, чем казалось:
Достаточно было изменить атрибут * onclick = "setAccommodation (\" '+ ui.content [i] .title +' \ ') "* на * onmousedown =" setAccommodation (\ "' + ui.content [i]. title + '\') "*, поскольку таким образом onmousedown был выполнен до того, как скрипт google закрыл выпадающий список, в котором находятся результаты.