What?

How to Make an AJAX Request in Joomla – Step-by-Step Guide

Why?

Using AJAX you can:

- Read data from a web server even after the page has loaded.

- To update a web page without reloading the page

- To send data to a web server - in the background

How?

Now there are two ways to achieve this functionality,

First is to use ajax component of Joomla. If you need to find out more about it. dsfsdf

Second solution is to use jQuery AJAX. For example I have search module. And I want to show suggestion box depending on what user type in search box.

Here is full code module->tmpl->default.php

defined('_JEXEC') or die('Restricted access');
<form action="" method="GET" class="">
<input name="searchFrom" type="hidden" value="searchBox" /> 
<button name="btnSearch" type="submit">Search</button>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){

  jQuery("#suggesstion_box").hide();

  jQuery("#txtKeyword").keyup(function(){
	
   var txtKeyword=jQuery("#txtKeyword").val();
   jQuery("#txtKeyword").keyup(function(){
		jQuery.ajax({
		type: "POST",
		url: "index.php?option=com_advertise&controller=advertise&task=getcate&keyword="+jQuery(this).val(),
		data:'keyword='+jQuery(this).val(),
		beforeSend: function(){
			jQuery("#txtKeyword").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
		},
		success: function(data){
			jQuery("#suggesstion_box").show();
			jQuery("#suggesstion_box").html(data);
			jQuery("#search-box").css("background","#FFF");
		}
		});
	});
  });
});
</script>