[英]PHP AJAX Live Search
我正在嘗試使用php ajax和oracle db實現實時搜索。 但是,當我在搜索框中鍵入內容時,我沒有得到結果。 我的表內容如下
SQL>從搜索中選擇*;
ID NAME
1 David Copperfield
2 Ricky Ponting
3 Cristiano Ronaldo
4 Lionel Messi
5 Shane Watson
請讓我知道我必須在哪里更改代碼。
碼:
1. db.php
<?php
// Create connection to Oracle
$conn = oci_connect("system", "******","//localhost/xe");
//Check connection
if (!$conn) {
$m = oci_error();
echo $m['message'], "\n";
exit;
}
else {
print "Connected to Oracle!";
}
?>
2. search.php
<!DOCTYPE html>
<html>
<head>
<title>Live Search using AJAX</title>
<!-- Including jQuery is required. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Including our scripting file. -->
<script type="text/javascript" src="script.js"></script>
<!-- Including CSS file. -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Search box. -->
<input type="text" id="search" placeholder="Search" />
<br>
<b>Ex: </b><i>David, Ricky, Ronaldo, Messi, Watson, Robot</i>
<br />
<!-- Suggestions will be displayed in below div. -->
<div id="display"></div>
</body>
</html>
3. ajax.php
<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_POST['search'])) {
//Search box value assigning to $Name variable.
$Name = $_POST['search'];
//Search query.
$query='SELECT Name FROM search WHERE Name LIKE '%Name%'';
//Query execution
$stid = oci_parse($conn, $query);
$execquery = oci_execute($stid);
//Creating unordered list to display result.
echo '
<ul>
';
//Fetching result from database.
while ($Result = oci_fetch_array($stid)) {
?>
<!-- Creating unordered list items.
Calling javascript function named as "fill" found in "script.js" file.
By passing fetched result as parameter. -->
<li onclick='fill("<?php echo $Result['Name']; ?>")'>
<a>
<!-- Assigning searched result in "Search box" in "search.php" file. -->
<?php echo $Result['Name']; ?>
</li></a>
<!-- Below php code is just for closing parenthesis. Don't be confused. -->
<?php
}}
?>
</ul>
4. script.js
//Getting value from "ajax.php".
function fill(Value) {
//Assigning value to "search" div in "search.php" file.
$('#search').val(Value);
//Hiding "display" div in "search.php" file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "search.php" file. This function will be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
//Assigning empty value to "display" div in "search.php" file.
$("#display").html("");
}
//If name is not empty.
else {
//AJAX is called.
$.ajax({
//AJAX type is "Post".
type: "POST",
//Data will be sent to "ajax.php".
url: "ajax.php",
//Data, that will be sent to "ajax.php".
data: {
//Assigning value of "name" into "search" variable.
search: name
},
//If result found, this funtion will be called.
success: function(html) {
//Assigning result to "display" div in "search.php" file.
$("#display").html(html).show();
}
});
}
});
});
5. style.css
a:hover {
cursor: pointer;
background-color: yellow;
}
謝謝。
請嘗試更改打擊代碼(ajax.php):
<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_POST['search'])) {
//Search box value assigning to $Name variable.
$Name = $_POST['search'];
//Search query.
$query="SELECT Name FROM search WHERE Name LIKE '%".$Name."%'";;
//Query execution
$stid = oci_parse($conn, $query);
$execquery = oci_execute($stid);
//Creating unordered list to display result.
$getResult = "<ul>";
//Fetching result from database.
while ($Result = oci_fetch_array($stid)) {
$getResult .="<li onclick='fill(".$Result['Name'].")'><a href='#'>".$Result['Name']."</a></li>";
}
$getResult .= "</ul>";
echo $getResult;
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.