Question

我有一个搜索栏，使用Ajax实现来搜索我的数据库并查询输入数据。view of results generated我的问题是如何使结果显示为可点击的链接，以便在单击时将它们直接转到查看哪个包含有关它们的更多信息？根据用户在搜索框中输入的内容，我添加了数据库查询代码和用于访问数据库的脚本。

<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

如果您只想使搜索结果可点击，并且浏览器加载了单击的超链接，则只需从数据库或JSON文件中回显超链接，具体取决于它们在html锚元素中的位置，例如：

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

注意：我在锚点href属性中回显了页面链接，这应该可以解决问题。

Answer 2

您只需添加一些代码即可在PHP生成的HTML中建立超链接：

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

我已经假设了您的ID字段的名称，但是您可以看到需要使用的模式。

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

2 个答案: