Im using three files to manage or not i guess this, these are as follows (I’m sorry i had to get rid of a lot proper grammar since i kept getting errors posting)
userNavbar.php
searchItems.php
handlerSearchInput.js
The code that matters
from the userNavbar.php
<div class="tab-content">
<div id="items" class="tab-pane active">
<label for="itemSearch">Item Search:
</br> the suggestions shown are clickable working on making that more clear</label>
<input type="text" class="form-control" id="itemSearch" placeholder="Type to search...">
<div id="suggestions">
</div>
<div class="form-group">
<?php
// Connect to your database and fetch data
$pdo = new PDO('Filled in properly but sensitive information');
$stmt = $pdo->query('SELECT id, itemName FROM items');
?>
</select>
</div>
and further down
<!---- EXTRA INFORMATION AFTER CLICK AUTO SUGGESTED SEARCH BAR ----->
<div id="itemInfo" style="display: none;">
<h2>Item Information</h2>
<p><strong>Name:</strong> <span id="itemName"></span></p>
<p><strong>Price:</strong> <span id="itemPrice"></span></p>
<p><strong>Description:</strong> <span id="itemDescription"></span></p>
</div>
The whole searchItems.php file
<?php
// Connect to database
$pdo = new PDO('Is properly filled in');
// Get search query from POST data
$itemSearch = $_POST['itemSearch'];
// Query database for matching items
$stmt = $pdo->prepare('SELECT id, itemName, price, description FROM items WHERE itemName LIKE :itemSearch');
$stmt->execute(['itemSearch' => '%' . $itemSearch . '%']);
$matchingItems = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Return matching items as JSON
header('Content-Type: application/json');
echo json_encode($matchingItems);
?>
And last but not least my handlerSearchInput.js
$(document).ready(function () {
// Handler for search input
$('#itemSearch').on('input', function () {
// Get search query
var itemSearch = $(this).val()
// Send AJAX request to get matching items
$.ajax({
url: '../includes/searchItems.php',
type: 'POST',
data: { itemSearch: itemSearch },
dataType: 'json',
success: function (items) {
console.log('Success:', items);
// Get suggestions container
var suggestionsContainer = $('#suggestions')
// Clear the suggestions container
suggestionsContainer.empty()
// If there are matching items
if (items.length > 0) {
// Loop through the matching items
$.each(items, function (index, item) {
// Create a suggestion element
var suggestion = $('<div>')
.addClass('suggestion')
.text(item.itemName)
.data('item', item); // Store the item data on the suggestion element
// Add a click event listener to set the value of the search input to the clicked suggestion
suggestion.on('click', function () {
var itemData = $(this).data('item'); // Retrieve the item data from the clicked suggestion
$('#itemSearch').val(itemData.itemName)
// Clear the suggestions container
suggestionsContainer.empty()
// Show the item information div
$('#itemInfo').show()
// Populate the item information
$('#itemName').text(itemData.itemName)
$('#itemPrice').text(itemData.price)
$('#itemTime').text(itemData.time)
})
// Append the suggestion element to the suggestions container
suggestionsContainer.append(suggestion)
})
}
},
error: function (xhr, status, error) {
console.error('Error:', error) // log the error message
},
})
})
})
Ive been trying to solve this for a while now but i cant seem to find it, additionally
in the browser console if i decide to add console.log(itemData); the line to show me the itemData, its exactly what i want it to be. HOWEVER when i want to show it on the webpage it doesnt populate it.
Theres also searchItems.php but that shouldn’t matter in this case.
Thanks in advance for reading this.
Debugging, had someone else try and help and alot of googling. I expected to have solved it by now but Ive been stuck for way too long.
