Я недавно начал с JS (JavaScript), и я пытаюсь сделать живой поиск на моей платформе.
Ввод:
<div class="row">
<div class="col-lg-12">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">MarketPlace</h6>
</div>
<div class="card-body">
<div class="input-group mb-4 p-2">
<input type="text" placeholder="Search something..." id="search-box" name="manage_search" aria-describedby="button-addon3" class="form-control border-0" id="search-box">
</div>
</div>
</div>
</div>
</div>
Ajax POST Request ( при вводе HTML код):
<script type="text/javascript">
// AJAX call for autocomplete
$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "POST",
url: "process.php",
data:'keyword='+$(this).val(),
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
console.log(data);
}
});
});
});
</script>
И процесс. php:
if(!empty($_POST["keyword"]))
{
global $db;
$query ="SELECT * FROM thbs_marketplace WHERE m_title like '" . $_POST["keyword"] . "%' ORDER BY m_title LIMIT 3";
$result = mysqli_query($db, $query)
or die ("SQL error(addon (marketplace)):" .mysqli_error($db));
if(@mysqli_num_rows($result) > 0)
{
foreach($result as $name)
{
?>
<script type="text/javascript">
document.getElementById('suggestions').innerHTML = `<div class="card-container">
<div class="card">
<h2><b><?php echo $name['m_title']; ?></b><span class="badge badge-success"><?php echo $name['m_price']. " ". getWebVar('currency'); ?></span></h2>
Type: <?php echo $name['m_type']; ?><br>
Description: <?php echo $name['m_description']; ?><br>
<img src="<?php echo $name['m_image'];?>" height="200px" width="400px" style="left: 5px;"alt="<?php echo $m_title;?>">
<br>
<a class="btn btn-primary" href="client_area?addon_use=MarketPlace&add_cart=<?php echo $name['m_id'];?>">Add to cart</a>
</div>
</div>`;
</script> <?php
}
}
}
else
{
?> <script> document.getElementById('suggestions').innerHTML = ``; </script>
<?
}
?>
Я знаю, я знаю, не использовать глобальный $ db, но в любом случае, искал по inte rnet, но ничего не нашел, кто-нибудь может мне помочь, пожалуйста?
консоль браузера:
<script type="text/javascript">
document.getElementById('suggestions').innerHTML = `<div class="card-container">
<div class="card">
<h2><b>FPings Hosting Theme</b><span class="badge badge-success">0.00 EUR</span></h2>
Type: Theme<br>
Description: A simple theme designed for THBS hosting providers.<br>
<img src="https://bruh-i-do-not-make-advertising.com/content/addons/MarketPlace/market_content/images/1.png" height="200px" width="400px" style="left: 5px;"alt="">
<br>
<a class="btn btn-primary" href="client_area?addon_use=MarketPlace&add_cart=1">Add to cart</a>
</div>
</div>`;
</script>
Спасибо всем! ^ - ^