我想在单击任何搜索结果后自动填写带有 id=id、name、email、company.. 的 div。搜索结果中的 id 用作过滤器以从 Mysql 中获取适当的行 数据来自 search.php 中使用的同一张表
这是我的表格
<link href="../action/css/onlinecustom.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./action/scripts/global2.js" type="text/javascript"></script>
<script>
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("../action/subs/search.php/", {searchVal: searchTxt}, function(output) {
$("#output").html(output);
});
}
</script>
<title>Search</title>
<body>
<form action="http://comiut.com/index.php/user-records" method="post">
<input type="text" name="search" Placeholder="enter the search criteria..." onkeydown="searchq();"/>
<input type="submit" value ="serach"/>
</form>
//Serach result//
<div id="output"> </div>
//Data to populate upon click on any search result//
<div id="id"></div>
<div id="name"></div>
<div id="email"></div>
<div id="company_name"></div>
</body>
** 我创建了一个 global2.js 文件 **
jQuery('body').on('click', 'a.resultItem', function(e) {
e.preventDefault();
jQuery.ajax({
url: "http://onlinepcdoc.com/action/subs/getItem.php",
method: 'post',
data : jQuery(this).data('id') // see the data attribute we used above in the a tag we constructed
}).done(function(data) {
jQuery("#id").html(data.id);
jQuery("#name").html(data.name);
jQuery("#email").html(data.email);
jQuery("#company_name").html(data.company);
});
});
我还创建了 search.php
<?php
include '../db/connect6.php';
if(isset($_POST['searchVal'])) {
$searchq = $_POST['searchVal'];
$searchq = preg_replace ("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM oz2ts_users WHERE oz2ts_users.id LIKE '%$searchq%' OR oz2ts_users.name LIKE '%$searchq%'") or die("Could not search");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There is no result to show!';
} else{
while($row = mysql_fetch_array ($query)) {
$id = $row['id'];
$name = $row['name'];
$username = $row['username'];
$output .= '<div><a class="resultItem" data-id="' . $id . '">'
. $name . ' '.$username.'</a></div>';
}
}
}
echo($output);
?>
** 这是getItem.php **
<?php
include '../db/connect6.php';
if(isset($_POST['id'])) {
$id = intval($_POST['id']);
$result = mysqli_query("SELECT oz2ts_users.id, oz2ts_users.name, oz2ts_users.username, oz2ts_users.email FROM oz2ts_users WHERE oz2ts_users.id = $id") or die("Could not search");
// since we expect only one result we don't need a loop
$row = mysqli_fetch_assoc($result);
// let's return the $row in json format
// first let's prepare the http header
header('Content-Type: application/json');
// and now we return the json payload
echo json_encode($row);
}
?>
最佳答案
你走在正确的道路上，虽然你自己没有尝试过任何东西，但这里有一些东西可以让你继续前进:
你应该返回这样的东西并填充你的搜索结果列表
$output .= '<div><a class="resultItem" data-id="' . $id . '">'
. $name . ' '.$username.'</a></div>';
接下来你需要一个额外的 ajax 调用来填充底部信息所以这是 javascript 位，注意 click 事件使用 body< 绑定(bind)到动态创建的元素的方式 on 构造:
$('body').on('click', 'a.resultItem', function(e) {
e.preventDefault();
$.ajax({
url: "getItem.php",
method: 'post',
data : $(this).data('id') // see the data attribute we used above in the a tag we constructed
}).done(function(data) {
$("#id").html(data.id);
$("#name").html(data.name);
$("#email").html(data.email);
$("#company_name").html(data.company);
});
});
现在您只需要 getItem.php，它可以是这样的:
<?php
include '../db/connect6.php';
if(isset($_POST['id'])) {
$id = intval($_POST['id']);
$result = mysqli_query("SELECT id,name,email,company FROM yourtable WHERE yourtable.id = $id") or die("Could not search");
// since we expect only one result we don't need a loop
$row = mysqli_fetch_assoc($result);
// let's return the $row in json format
// first let's prepare the http header
header('Content-Type: application/json');
// and now we return the json payload
echo json_encode($row);
}
关于javascript - 搜索结果中的动态链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32873948/