Подсказки - PHP Online

Form of PHP Sandbox

Enter Your PHP code here for testing/debugging in the Online PHP Sandbox. As in the usual PHP files, you can also add HTML, but do not forget to add the tag <?php in the places where the PHP script should be executed.



Your result can be seen below.

Result of php executing





Full code of Подсказки.php

  1. <?php
  2.  
  3. if (!empty($_POST['text']) && is_string($_POST['text'])) {
  4.     header('content-type: application/json'); // говорим что контент JSON
  5.     $query = json_encode(['text' => $_POST['text']]); // сохраняем JSON
  6.     exit; // завершаем скрипт если это POST-запрос
  7.  
  8.     $url = 'http://ahunter.ru/site/suggest/address?addresslim=3;output=json|pretty;query=' . $query;
  9.  
  10.     $ch = curl_init();
  11.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  12.     curl_setopt($ch, CURLOPT_URL, $url);
  13.  
  14.     $response = curl_exec($ch);
  15.     $data = json_decode($response, true);
  16.     curl_close($ch);
  17.  
  18.     var_dump($data);
  19. }
  20.  
  21. ?>
  22.  
  23. <!DOCTYPE html>
  24. <html lang="en">
  25.  
  26. <head>
  27.     <meta charset="UTF-8" />
  28.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  29.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  30.     <title>Подсказки</title>
  31. </head>
  32. <style>
  33.     input {
  34.         padding: 10px;
  35.     }
  36.  
  37.     .city1 {
  38.         display: none;
  39.         margin: 5px;
  40.         padding: 10px;
  41.         width: 465px;
  42.     }
  43.  
  44.     .city2 {
  45.         display: none;
  46.         margin: 5px;
  47.         padding: 10px;
  48.         width: 465px;
  49.     }
  50.  
  51.     .city3 {
  52.         display: none;
  53.         margin: 5px;
  54.         padding: 10px;
  55.         width: 465px;
  56.     }
  57.  
  58.     .city1:hover {
  59.         cursor: pointer;
  60.         background-color: #d9d9d9;
  61.     }
  62.  
  63.     .city2:hover {
  64.         cursor: pointer;
  65.         background-color: #d9d9d9;
  66.     }
  67.  
  68.     .city3:hover {
  69.         cursor: pointer;
  70.         background-color: #d9d9d9;
  71.     }
  72.  
  73.     .button {
  74.         text-decoration: none;
  75.         padding: 10px;
  76.         border: 1px solid black;
  77.         color: #000;
  78.         transition: 0.7s;
  79.     }
  80.  
  81.     .button:hover {
  82.         background-color: #d2d2d2;
  83.         transition: 0.7s;
  84.     }
  85. </style>
  86.  
  87. <body>
  88.     <form method="post">
  89.         <input size="70" id="input" value="" type="text" placeholder="Введите город:" />
  90.         <a href="#" class="button">Очистить</a>
  91.     </form>
  92.     <div class="city1"></div>
  93.     <div class="city2"></div>
  94.     <div class="city3"></div>
  95.     <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  96.     <script>
  97.         window.addEventListener('DOMContentLoaded', function() {
  98.             var input = document.querySelector('input#input');
  99.             input.addEventListener('input', function(e) {
  100.                 // Избавляемся от пустых запросов к API
  101.                 if (e.target.value === '' || e.target.value === null) {
  102.                     return;
  103.                 }
  104.                 $.ajax({
  105.                     type: 'POST',
  106.                     url: '',
  107.                     dataType: 'JSON', // говорим JQUERY что ждём JSON
  108.                     data: {
  109.                         text: e.target.value
  110.                     },
  111.                     success: function(r) {
  112.                         // r хранит пришедший JSON в виде JS объекта или массива
  113.                         console.log(r['text']);
  114.                     }
  115.                 });
  116.             });
  117.         });
  118.     </script>
  119. </body>
  120.  
  121. </html>
  122.