如何添加指向Ajax搜索结果的链接？

Question

I have a search bar which uses Ajax implementation to search my database and query the input data. view of results generated My question is how do I make the results show up as clickable link so that when clicked they go straight to the view which holds more information about them? I have added the code for database query and the script used for accessing the database based on what was entered by the user in the search box.

<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>

database query:

 <?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

If all you want is making the search result clickable and browser loads the hyperlink clicked on, just echo the hyperlink from your database or JSON file depends on where they are into the html anchor element such as this:

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

Note: I echoed the page link in the anchor href attribute, that should solve the problem.

Answer 2

You can simply add some code to make a hyperlink into the HTML your PHP is generating:

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

I have made an assumption about the name of your ID field but you can see the pattern you need to use.