Dynamic search bar in jQuery with result display problems - php

Question

I have a small question: I created a dynamic search bar until now it's ok. But the problem I have is that when I type the beginning of a letter or a number, I don't have a display limit it takes all the page someone already have a solution?
Thanks a lot
Here is the jQuery code:
$(document).ready(function () {
$('#search-stock').keyup(function (){
$('#result-search').html('');
var stock = $(this).val();
if (stock != "") {
$.ajax({
type: 'GET',
url: '../ajax/stock_search.php',
data: 'stocks=' + encodeURIComponent(stock),
success: function (data) {
if (data != "")
{
$('#result-search').append(data);
} else {
document.getElementById('result-search').innerHTML = "" + "<div style='font-size: 20px; text-align: center; margin-top: 10px'> Aucun élement trouver</div>"
}
}
});
}
});
});
Here is the php
<?php
session_start();
include('../include/bdd.php');
if(isset($_GET['stocks'])){
$stock_aema = (string) trim($_GET['stocks']);
$req = $bdd->prepare("SELECT * FROM stock_aema WHERE model LIKE :model LIMIT 10");
$req2 = $bdd->prepare("SELECT * FROM stock_aema WHERE id LIKE :id LIMIT 10");
$req3 = $bdd->prepare("SELECT * FROM stock_aema WHERE aema LIKE :aema LIMIT 10");
$req->execute(array('model' => "%$stock_aema%"));
$req = $req->fetchAll();
foreach ($req as $r){
?>
<div style="margin-top: 20px ; border-bottom: 2px solid #ccc">
<?= $r['id'] . " " . $r['model']. " " . $r['aema']?>
</div>
<?php
}
$req2->execute(array('id' => "%$stock_aema%"));
$req2 = $req2->fetchAll();
foreach ($req2 as $s){
?>
<div style="margin-top: 20px ; border-bottom: 2px solid #ccc">
<?= $s['id'] . " " . $s['model']. " " . $s['aema']?>
</div>
<?php
}
$req3->execute(array('aema' => strval("%$stock_aema%")));
$req3 = $req3->fetchAll();
foreach ($req3 as $x){
?>
<div style="margin-top: 20px ; border-bottom: 2px solid #ccc">
<?= $x['id'] . " " . $x['model']. " " . $x['aema']?>
</div>
<?php
}
}
?>