javascript - 如何在实时搜索中使整行可点击
问题描述
我正在进行实时搜索。使用 ajax 连续编写链接后,它停止响应
这是我制作的代码
//让这个页面名称为index.php
<div>
<input type="search" id="searchterm" name="searchterm" placeholder="Search" >
</div>
<table id="result"></table>
//这是index.page的脚本
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"search.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#searchterm').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
//这个页面是search.php
$output='';
if(isset($_POST["query"]))
{
$keyword=mysqli_real_escape_string($conn, $_POST["query"]);
$query="SELECT uid,name,lastname ,profile_pic,about FROM comnet_user_details WHERE uid!='$uid' AND concat_ws(' ',name, lastname) LIKE UPPER('%$keyword%')";
$result=mysqli_query($conn,$query);
if(mysqli_num_rows($result) > 0)
{
while($r=mysqli_fetch_array($result))
{
$nm=$r["name"]." ".$r["lastname"];
$profilepic=$r["profile_pic"];
$about=$r["about"];
$id=$r["uid"];
$output .=
'<table class="msgtab" id="fetchresult">
<tr class="trow" onclick="location.href="conversation.php?value='.$id.'"">
<td class="msg-col-1"><img src="images/profilepic/'.$r["profile_pic"].'alt="Avatar" class="circlemsg"></td>
<td class="msg-col-2">
<h5 class="msgheading">'.$nm.'</h5>
<p class="msgcontent">'.$about.'</p>
</td>
</tr>;
}
echo $output;
}
我希望实时搜索结果行应该是可点击的,并且点击一个特定的结果或行应该会导致想要的页面,但是我的实时搜索结果链接不起作用
解决方案
<img src="images/profilepic/'.$r["profile_pic"].'alt="Avatar" class="circlemsg">
It need to be中有错字<img src="images/profilepic/'.$r["profile_pic"].'" alt="Avatar" class="circlemsg">
此外,
profile_pic
是否也有扩展名(即:'jpg,png')?
编辑:
你能用这个替换这段代码吗(希望它能起作用): -table
在while循环中创建一个 - >创建每一行<tr>
- 然后关闭table
if(mysqli_num_rows($result) > 0) {
$output = '<table class="msgtab" id="fetchresult">';
while($r=mysqli_fetch_array($result))
{
$nm=$r["name"]." ".$r["lastname"];
$profilepic=$r["profile_pic"];
$about=$r["about"];
$id=$r["uid"];
$output .=
'<a href="conversation.php?value='.$id.'">
<tr class="trow">
<td class="msg-col-1"><img src="images/profilepic/'.$r["profile_pic"].'" alt="Avatar" class="circlemsg"></td>
<td class="msg-col-2">
<h5 class="msgheading">'.$nm.'</h5>
<p class="msgcontent">'.$about.'</p>
</td>
</tr>
</a>';
}
$output .= '</table>';
echo $output;
}
推荐阅读
- java - 有关方法和类、非静态错误等的问题
- excel - 如何从另一个工作表列中获取数据并仅提取数字
- libuv - libuv 错误 - 未初始化的流
- mysql - .hasMany 调用的不是 Sequelize.Model 的子类
- spring - 每个消费者使用 gradle 从合约仓库生成存根
- javascript - Moment.js 适用于 PDT 但不适用于 IST
- reporting-services - SSRS 报告显示当前租赁的每月现金流量
- python - 如果两个数据帧都存在于数据帧中,python/pandas 合并两个数据帧
- sql - 在 SQL Server 中的第 n 个字符之后追加任何特殊字符而不会破坏单词
- java - 改善太空外星人的移动