【发布时间】：2019-12-15 21:50:21
【问题描述】：
所以，我正在使用AJAX Live Search PDO 我更改了后端搜索以链接显示的单词。问题是如果您单击表格，它不会将它们带到链接，而只是输入文本。我希望能够链接整行......所以如果他们不只是点击搜索的单词。
我非常彻底地阅读了document，但没有找到答案。
我认为它要么在 search-form.php 第 62 行的 JavaScript 上，要么在 backend-search.php 之一上
我加了
<a href=\"" . $row["link"] . "\"> to the backend-search file.
search-form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</body>
</html>
后端搜索.php
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
$pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try{
if(isset($_REQUEST["term"])){
// create prepared statement
$sql = "SELECT * FROM countries WHERE name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST["term"] . '%';
// bind parameters to statement
$stmt->bindParam(":term", $term);
// execute the prepared statement
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p><a href=\"" . $row["link"] . "\">" . $row["name"] . "</a></p>";
}
} else{
echo "<p>No matches found</p>";
}
}
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close statement
unset($stmt);
// Close connection
unset($pdo);
?>
我希望当一个人点击结果行中的任意位置时，它会转到链接。目前他们必须点击超链接
【问题讨论】：
-
在行中放置一个事件监听器。并在其中使用这个指令：window.location = "URL";
-
我不知道如何添加一个均匀的监听器。你能解释更多吗？
-
EventListener 接口表示一个对象，它可以处理由 EventTarget 对象调度的事件，例如：
$('.search-box input[type="text"]').on("keyup input", function(){})=> 当您在输入中按下某个键时，将会处理一些事情。$(document).on("click","<row selector>",function (){window.location="url"})=> 当您点击元素时，导航将处理 -
如果仍然不清楚，如果没有人，我会稍后发布答案。
标签： javascript php pdo