ممنونم.

سلام،

براساس کد ajax ای که نوشته شده، خروجی به ترتیب echo میشود و به سمت کلاینت ارسال میشد و در سمت کلاینت آنچه سرور فرستاده را(کدهای html را) با کد زیر نمایش میدهد:

success: function(response) {
    searchResult.slideDown().html(response);
}

همانطور که میبینید در قسمت success مقادیری که از سمت سرور ارسال میشود در response قرار میگیرد و ...

• سلوشن بهتر:

اما همانطور که استاد در ویدیو اشاره میکنند، برای پیاده سازی ajax بهتر است در سمت سرور، داده‌ها را در قالب JSON به سمت کلاینت پاس بدیم سپس در سمت کلاینت داده ی JSON را پردازش کرده و در سند html نمایش دهیم.

بنابراین کد سمت سرور به این شکل خواهد بود:(جایگزین foreach میشود)

echo json_encode($locations);

سمت کلاینت:

// This array also needs to be added to the client side
const locationTypes = [
    "عمومی",
    "شرکت",
    "رستوران",
    "پارک",
    "فروشگاه",
    "پاساژ",
    "قهوه خونه",
    'دانشگاه'
];
$('#search').keyup(function() {
    const input = $(this);
    const searchResult = $('.search-results');
    searchResult.html('در حال جستجو ...');
    $.ajax({
        url: '',
        method: 'POST',
        data: {
            keyword: input.val()
        },
        dataType: 'json',
        success: function(response) {
            let htmlContent = '';
            response.forEach(function(loc) {
                htmlContent += `< a href='?loc=${loc.id}'>
                      < div class='result-item' data-lat='${loc.lat}' data-lng='${loc.lng}' data-loc='${loc.id}'>
                      < span class='loc-type'>${locationTypes[loc.type]}< /span>
                          < span class='loc-title'>${loc.title}< /span>
                      < /div>
                    < /a>`;
            });
            searchResult.slideDown().html(htmlContent);
        }
    });
});

فیلد dataType: json هم اضافه شده است به پارامتر‌های ajax.

نکته: بعضی وقتها ممکنه بخاطر امنیت اطلاعات همه ی اطلاعات را به سمت کلاینت نفرستید یا نیاز به جمع اوری داده‌های مختلف از چندین متغیر مختلف داشته باشید و ...، در این شرایط میتوانید یک آرایه بسازید و داده‌های را جمع آوری کنید و آرایه را بصورت JSON به سمت کلاینت ارسال کنید.

در کدهای بالا چون locationTypes را در سمت سرور بصورت یک آرایه داشتیم بهمین خاطر همین آرایه را در سمت کلاینت ساختیم وگرنه میتوانستیم با همین توضیحاتی که آوردم، در متغیری که میسازیم این داده را هم قرار بدهیم.

برای مثال روی همین locations من یک آرایه میسازم:

$response = [];
foreach($locations as $loc) {
    $response[] = [
        'url' => BASE_URL . "?loc=" . $loc->id,
        'lat' => $loc->lat,
        'lng' => $loc->lng,
        'locId' => $loc->id,
        'locType' => locationTypes[$loc->type],
        'locTitle' => $loc->title
    ];
}
echo json_encode($response);