Получение щелкнутого элемента из заполненного списка ajax
Я использую поиск почтовых индексов Великобритании, который генерирует простую форму, выполняет вызов API и заполняет список возвращенными элементами:
<script>
$('#postcode_lookup').getAddress(
{
api_key: 'XXXXX',
output_fields:
{
line_1: '#line1',
line_2: '#line2',
line_3: '#line3',
post_town: '#town',
county: '#county',
postcode: '#postcode'
},
input_label:'Please enter your postcode',
input_class:'form-control',
button_label:'Search',
button_class:'btn btn-primary'
});
</script>
Так что я заканчиваю с
Теперь я хочу выбрать один из элементов и перенести адресную строку на другую страницу.
Есть ли лучший способ сделать это, пожалуйста?
Ответы 3
Похоже, вы используете плагин https://getaddress.io. Это позволяет вызывать пользовательский код путем регистрации метода обратного вызова. Вам понадобится функция onAddressSelected.
Ниже приведен пример для иллюстрации (поскольку у меня нет действующей лицензии) того, как перенаправить на другую страницу с выбранным адресом.
$('#postcode_lookup').getAddress(
{
api_key: 'YOUR_API_KEY',
output_fields:
{
line_1: '#line1',
line_2: '#line2',
line_3: '#line3',
post_town: '#town',
county: '#county',
postcode: '#postcode'
},
<!-- Optionally register callbacks at specific stages -->
onLookupSuccess: function (data) {/* Your custom code */ },
onLookupError: function () {/* Your custom code */ },
onAddressSelected: function (elem, index) {
/* Your custom code */
window.location.replace("/other-page?address = " + index.formatted_address);
}
});
Вы можете прочитать больше о документации https://getaddress.io/Documentation (см. ссылку JQuery слева)
Также плагин предоставляет API, что означает, что вы не ограничены JQuery.
Спасибо, Грег. Я использовал API после получения почтового индекса из простой формы, настроил таблицу почтовых индексов и почтовый индекс адресов, проверил, есть ли почтовый индекс в базе данных. Если это не так, я записал информацию, а также занес каждый адрес в таблицу. Тогда это просто случай передачи идентификатора почтового индекса в представление и отображения адресов.
Это выпадающий список?
«Теперь я хочу выбрать один из элементов и перенести адресную строку на другую страницу. Какой-нибудь лучший способ сделать это, пожалуйста?»
(Я на самом деле, честно говоря, не знаю ответа или знаю на 100%, что вы имеете в виду, но надеюсь, что это каким-то образом поможет)
Первое, что приходит мне в голову, это POST, когда вы нажимаете SUBMIT.
это или вы хотите отправить по клику?
если это так,
<element onclick = "this.form.submit()">
если вы хотите, чтобы весь раскрывающийся список был на другой странице, я думаю, что самый простой способ - сохранить эту часть как собственную страницу, например, «DropDownListCode.php»
то вы делаете: <?php require_once('DropDownListCode.php'); ?>"
На этой странице вы сохраняете такие вещи, как
<element id = "postcode_lookup">
<script>
$('#postcode_lookup').getAddress(
{
api_key: 'YOUR_API_KEY',
output_fields:
{
line_1: '#line1',
line_2: '#line2',
line_3: '#line3',
post_town: '#town',
county: '#county',
postcode: '#postcode'
},
<!-- Optionally register callbacks at specific stages -->
onLookupSuccess: function (data) {/* Your custom code */ },
onLookupError: function () {/* Your custom code */ },
onAddressSelected: function (elem, index) {
/* Your custom code */
window.location.replace("/other-page?address = " + index.formatted_address);
}
});
</script>
Получив некоторую помощь от GetAddress.io, оказалось, что элемент больше не является массивом, а является объектом, к которому вы просто обращаетесь, используя свойства, например. элем.уезд
building_name: ""
building_number: "44"
country: "England"
county: "East Sussex"
district: "Brighton And Hove"
formatted_address: (3) ["40 Wordsworth Street", "Hove", "East Sussex"]
line_1: "40 Wordsworth Street"
line_2: ""
line_3: ""
line_4: ""
locality: ""
sub_building_name: ""
sub_building_number: ""
thoroughfare: "Wordsworth Street"
town_or_city: "Hove"
Я пробовал (в ответе создается раскрывающийся список с идентификатором getaddress_dropdown): $(document).on("change", "#getaddress_dropdown", function() { alert($(this).find("option:selected" ).текст());});