I have implemented a search input on my website that allows users to search for content within my database. I want this search input to function similarly to the search bar on Facebook, using Ajax for instant searching. Despite trying various code snippets with the keyup event, I have not been successful in getting it to work.
Here is the routing configuration:
acme_estm_site_espace_supr_admin_recuperer_donnes_recherche:
path: /chercher
defaults: { _controller: AcmeEstmSiteBundle:Default:recupererdonnesrechercheAction}
And here is the relevant controller code:
$('#search').keyup(function(key) {
var query = $(this).val();
var data = {
request: query
};
$.ajax({
type: "POST",
url: "{{ path('acme_estm_site_espace_supr_admin_recuperer_donnes_recherche') }}",
data: data,
success: function(response, dataType) {
alert(response);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('Error : ' + errorThrown);
}
});
});
public function recupererdonnesrechercheAction(Request $request){
if($this->getRequest()->isXmlHttpRequest()){
echo "This is an Ajax request";
$data = $request->request->get('request');
echo $data;
}
return new Response();
}
When testing the functionality, I encountered an alert error stating "Error: Not Found."
If anyone could assist me in resolving this issue, I would greatly appreciate it. Thank you in advance.