I have this input field that reads the user' input in "index.php"
<input type="text" name="medname" id="medname" class="search-input" placeholder="Search..." name="">
<div class="result"></div>
Then this AJAX live search function receives the input, sends it to "livesearch.php" file to search the database for matching data. Then receives a paragraphe element to display it as a search result.
AJAX function in "index.php"
<script>
$(document).ready(function() {
$('.search 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("livesearch.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").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
livesearch.php
if(isset($_REQUEST["term"])){
// Prepare a select statement
$sql = "SELECT * FROM medicine WHERE mName LIKE ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_term);
// Set parameters
$param_term = $_REQUEST["term"] . '%';
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
$result = mysqli_stmt_get_result($stmt);
// Check number of rows in the result set
if(mysqli_num_rows($result) > 0){
// Fetch result rows as an associative array
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
echo "<p>" . $row["mName"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
Now for my problem a have another page called "map.php". I need to send "mID : Id of a medicine" and "mName : Name of a medicine" that the user's selected to that page.
How can i do that?
I solved the issue by using json. I don't understand it very much but it works(CSS not included).
index.php
<script>
jQuery(document).ready(function($) {
$('#keyword').on('input', function() {
var searchKeyword = $(this).val();
if (searchKeyword.length >= 1) {
$.post('search.php', { keywords: searchKeyword }, function(data) {
$('ul#content').empty().addClass('active');
$.each(data, function() {
$('ul#content').append('<li><a href="map.php?id=' + this.id + '">' + this.title + '</a></li>');
});
}, "json");
} else {
$('ul#content').empty().removeClass('active');
}
});
});
</script>
index.php (Input and results field)
<form method="POST">
<input type="text" id="keyword" class="search-input" placeholder="Search..." name="">
<ul class="result" id="content"></ul>
</form>
search.php
<?php
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_SERVER', 'localhost');
define('DB_NAME', 'pharmacie');
if (!$db = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME)) {
die($db->connect_errno.' - '.$db->connect_error);
}
$arr = array();
if (!empty($_POST['keywords']) && strlen($_POST['keywords']) >= 1) {
$keywords = filter_var($_POST['keywords'], FILTER_SANITIZE_STRING);
$keywords = $db->real_escape_string($keywords);
$sql = "SELECT mID, mName FROM medicine WHERE mName LIKE '%".$keywords."%'";
$result = $db->query($sql) or die($mysqli->error);
if ($result->num_rows > 0) {
while ($obj = $result->fetch_object()) {
$arr[] = array('id' => $obj->mID, 'title' => $obj->mName);
}
}
}
echo json_encode($arr);