Как добавить ссылки на результаты поиска из Ajax?

Question

У меня есть панель поиска, которая использует реализацию Ajax для поиска в моей базе данных и запроса входных данных. просмотр сгенерированных результатов Мой вопрос: как сделать так, чтобы результаты отображались в виде интерактивной ссылки, чтобы при нажатииони идут прямо к представлению, которое содержит больше информации о них?Я добавил код для запроса к базе данных и сценарий, используемый для доступа к базе данных, на основе того, что было введено пользователем в поле поиска.

<script>
  $(document).ready(function() {
    $('#search-data').unbind().keyup(function(e) {
      var value = $(this).val();
      if (value.length>3) {
        //alert(99933);
        searchData(value);
      }
      else {
        $('#search-result-container').hide();
      }
    }
                                    );
  }
                   );
  function searchData(val){
    $('#search-result-container').show();
    $('#search-result-container').html('<div><img src="preloader.gif" width="50px;" height="50px"> <span style="font-size: 20px;">Searching...</span></div>');
    $.post('controller.php',{
      'search-data': val}
           , function(data){
      if(data != "")
        $('#search-result-container').html(data);
      else    
        $('#search-result-container').html("<div class='search-result'>No Result Found...</div>");
    }
          ).fail(function(xhr, ajaxOptions, thrownError) {
      //any errors?

      alert("There was an error here!");
      //alert with HTTP error
    }
                );
  }
</script>

    <form>
<div class="manage-accounts" id="users">
      <div id="search-box-container" >
        <label > Search For Any Event: 
        </label>
        <br>
        <br>
        <input  type="text" id="search-data" name="searchData" placeholder="Search By Event Title (word length should be greater than 3) ..." autocomplete="off" />
      </div>
      <div id="search-result-container" style="border:solid 1px #BDC7D8;display:none; ">
      </div>
    </div>

</form>

запрос к базе данных:

 <?php
include("fetch.php");
class DOA{
public function dbConnect(){
$dbhost = DB_SERVER; // set the hostname
$dbname = DB_DATABASE ; // set the database name
$dbuser = DB_USERNAME ; // set the mysql username
$dbpass = DB_PASSWORD;  // set the mysql password
try {
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->exec("set names utf8");
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}
catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
}
public function searchData($searchVal){
try {
$dbConnection = $this->dbConnect();
$stmt = $dbConnection->prepare("SELECT * FROM events WHERE title like :searchVal");
$val = "%$searchVal%"; 
$stmt->bindParam(':searchVal', $val , PDO::PARAM_STR);   
$stmt->execute();
$Count = $stmt->rowCount(); 
//echo " Total Records Count : $Count .<br>" ;
$result ="" ;
if ($Count  > 0){
while($data=$stmt->fetch(PDO::FETCH_ASSOC)) {          
$result = $result .'<div class="search-result">'.$data['title'].'</div>';    
}
return $result ;
}
}
catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
} 
}
?>

Answer 1

Вы можете просто добавить код, чтобы сделать гиперссылку на HTML, который генерирует ваш PHP:

$result = $result .'<div class="search-result"><a href="http://events.php?id='.$data["id"].'">'.$data['title'].'</a></div>';

Я сделал предположение относительно названия вашего поля ID, но вы можете увидеть шаблон, который вам нужно использовать.

Answer 2

Если все, что вам нужно, это сделать результат поиска кликабельным, и браузер загружает гиперссылку, по которой щелкнули, просто отобразите гиперссылку из вашей базы данных или файла JSON, в зависимости от того, где они находятся в элементе привязки html, например:

<a href="<?php echo $row['page_link'] ?>"><?php echo $row['page_title'] ?></a>

Примечание: я повторил ссылку на страницу в атрибуте привязки href, которая должна решить проблему.