Выводим подсказки для полей адреса на сайте Bitrix

В новой записи я вам покажу свое решение для вывода подсказок для полей местоположения. В записи представлен код для любого типа полей (название города, название области, название страны).

Данные мы будем брать через API модуля Location.

При изменение поля будет отправляться Ajax запрос на файл со скриптом, и данный скрипт будет возвращать названия по части слова.

Дополнительно к этому, я добавил условие сортировки, при котором определенные города будут выше остальных.

HTML

Вёрстка состоит из обёртки для текстового поля fieldBlock, самого поля и блока куда будут выводиться варианты заполнения windowFieldValue.

<div class="fieldBlock">
    <input type="text" name="" id="state">
    <div class="windowFieldValue"></div>
</div>

CSS

.fieldBlock {
    display: flex;
    flex-direction: column;
    width: 300px;
}

.windowFieldValue ul.listFieldValue {
    padding: 0;
    margin: 0;
}
.windowFieldValue .listFieldValue li.itemFieldValue {
    font-size: 14px;
    list-style: none;
    line-height: 1;
    padding: 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.windowFieldValue .listFieldValue li.itemFieldValue:hover {
    background: #eee;
}

JavaScript

Для реализации своего решения я использую несколько функций

queryDataGeo — для отправки ajax запроса

createListGeoData — для формирования списка вариантов заполнения

/* ФУНКЦИЯ ДЛЯ ОТПРАВКИ AJAX ЗАПРОСА */
function queryDataGeo() {
    let value = $(this).val()

    if(value) {
	$.ajax({
		url: "/local/templates/bintaga/ajax/basketValueField.php",
		method: 'post',
		dataType: 'html',
		data: {valueField: value},
		success: function(data){
		    var listData = jQuery.parseJSON(data);
		    createListGeoData("state", listData) 
		}
	});
    }
	
}

/* ФУНКЦИЯ ДЛЯ СОЗДАНИЯ СПИСКА ВАРИАНТОВ ПОД ПОЛЕМ */
function createListGeoData(idField, arrListGeo) {
    $("#".idField).siblings(".windowFieldValue").remove()

    let codeDataGeo = '<ul class="listFieldValue">'
    for(let item in arrListGeo) {
	codeDataGeo += `<li onclick="$(this).parents('.fieldBlock').find('input').val($(this).text())" class="itemFieldValue">`+ arrListGeo[item] +`</li>`
    }
    codeDataGeo += "</ul>"

    $(".windowFieldValue").html(codeDataGeo)
}

/* при выборе варианта закрываем окно */
$(".windowFieldValue").on("click", function() {
    $(this).html()
})

/* при вводе в текста в поле, сразу отправляем ajax запрос */
$("input[type='text']").on("input", queryDataGeo)

PHP

<?php
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");

\Bitrix\Main\Loader::includeModule('sale');

/* список городов которые имеют приоритет */
$listMainState = [
    "Москва",
    "Санкт-Петербург",
    "Нижний Новгород",
    "Белгород",
    "Брянск",
    "Воронеж",
    "Иваново",
    "Краснодар",
    "Курск",
    "Липецк",
    "Орел",
    "Рязань",
    "Сочи",
    "Тула",
    "Ярославль",
];


$res = \Bitrix\Sale\Location\LocationTable::getList(array(
    'filter' => [
	'=TYPE.ID' => '5', 
	'=NAME.LANGUAGE_ID' => LANGUAGE_ID, 
	'NAME_RU' => $_POST["valueField"] . '%'
    ],
    'select' => [
	'NAME_RU' => 'NAME.NAME'
    ]
));

$listData = [];
while($item = $res->fetch()) {
    if(in_array($item['NAME_RU'], $listMainState)) {
	array_unshift($listData, $item['NAME_RU']);
    }
    else {
	array_push($listData, $item['NAME_RU']);
    }
}

$listData = array_slice($listData, 0, 10);
echo json_encode($listData);


?>