title: PHP MySQL & AJAX search filter time delay
body: <p>This is the first time i am working on php and JavaScripts ... need your help in fixing something.</p>
  
  <p>my site have a searchbox at the header, when a search term is submitted it goes to the search.php which holds a filter menu and search result. The filter menu is based on few selectlist. As soon as any optionis clicked in the filter menu it updates the search result.</p>
  
  <p>For this i am using a javascript that calls data from another php file "SearchResult.php" to update a div with ID #Result.</p>
  
  <p>PROBLEM:
  it works perfectly fine at localhost however when online it causes a delay in updating the Search Result.</p>
  
  <p>HELP:
  Is there any way to show loading of some kind to let the viewer understand or is there anyway to make it fast.</p>
  
  <p>here are my codes:</p>
  
  <p>Java Script Function</p>
  
  <pre><code>function get() 
  {
      $('#Search_Results').hide();
      $.post('SearchResults.php', { Search: form.Search.value, cat: form.category.value, brand: form.brand.value },
      function(output) 
          {
              $('#Search_Results').html(output).show();
          }
  )
  }
  </code></pre>
  
  <p>SEARCH FILTER FORM </p>
  
  <pre><code>enter code hereif(!empty($_REQUEST['Search'])){
  $SearchTerm = $_REQUEST['Search'];
  } else {
      $SearchTerm = '';
  }
  // Search term submited 
  echo '&lt;input name="Search" type="hidden" value="'.$SearchTerm.'" /&gt;';
  $sql = mysql_query ("SELECT * FROM categories");
  echo '&lt;h4&gt;Filter Categories&lt;/h4&gt;&lt;select name="cat" onChange="get();" size="15"&gt;';
  echo '&lt;option value="" class="Select_Options"&gt;All Categories&lt;/option&gt;';
      while ($row = mysql_fetch_array($sql)) 
          {
              echo '&lt;option class="Select_Options" value="' . $row["CategoryID"] . '"&gt;' . $row["CategoryName"] . '&lt;/option&gt;';
      }
  echo '&lt;/select&gt;';
  //Few more such filters
  </code></pre>
  
  <hr>
  
  <p>SEARCH RESULT PAGE</p>
  
  <pre><code>if(!empty($_REQUEST['Search'])){
  $SearchTerm = $_REQUEST['Search'];
  }
  else {
  echo 'Please enter search keyword(s)';
  exit();
  }
  if(!empty($_REQUEST['cat'])){
  $cat = $_REQUEST['cat'];
  $SearchQuery .= " AND categories.CategoryID = '$cat'";
  }
  
  if(!empty($_REQUEST['brand'])){
  $brand = $_REQUEST['brand'];
  $SearchQuery .= " AND brands.BrandID = '$brand'";
  }
  
  $sql = "SELECT DISTINCT products.ProductID, ProductKeywords, products.SectionID, products.ProductThumb, products.ProductPrice, products.CategoryID, products.SubCategoryID, products.BrandID, brands.BrandLogo, ProductTitle AS title FROM products 
      INNER JOIN brands ON products.BrandID = brands.BrandID 
      INNER JOIN sections ON products.SectionID = sections.SectionID 
      INNER JOIN categories ON products.CategoryID = categories.CategoryID 
      INNER JOIN subcategory ON products.SubCategoryID = subcategory.SubCatID $ColorJoin
      WHERE MATCH (ProductKeywords) AGAINST ('$SearchTerm*' in boolean mode)$SearchQuery";
  
  $query = mysql_query($sql);
  echo '&lt;div id="Product_Search_Container"&gt;&lt;ul&gt;';
  while ($row = mysql_fetch_array($query)) 
  {
  
      $ProductID = $row["ProductID"];     
      $sql2 = mysql_query ("SELECT COUNT(ProColorID) AS ProductCount FROM productcolors WHERE ProductID = '$ProductID'");     
              while ($row5 = mysql_fetch_array($sql2)) 
              {
                  $BrandID = $row["BrandID"];
                  $sql3 = mysql_query ("SELECT * FROM brands WHERE BrandID = '$BrandID'");        
                  while ($row6 = mysql_fetch_array($sql3)) 
                  {
                      $ProductThumb = $row["ProductThumb"];
                      if ($ProductThumb == NULL) { $ProductThumb = "No_Image.jpg"; }
  
              echo '&lt;li&gt;&lt;img src="images/Products/Thumbs/' . $ProductThumb . '" width="210px" height="275px" /&gt;
                      &lt;div class="zoomer"&gt;&lt;span class="zoom';
                      if ($ProductThumb != "No_Image.jpg") {
                          echo ' cursonstyle" style="position: relative; overflow: hidden;"&gt;&lt;img src="images/Products/Thumbs/zoom/' . $ProductThumb . '" alt="' . $row["title"] . '" /&gt;
                      '; } else { echo '"&gt;'; }
                      echo '&lt;/span&gt;&lt;span class="Pro_Title"&gt;' . $row["title"] . '&lt;/span&gt;
                      &lt;span class="BrandLogo"&gt;&lt;img src="images/Brands/' . $row6["BrandLogo"] . '" /&gt;&lt;/span&gt;
                      &lt;span class="ProColors"&gt;' . $row5["ProductCount"] . ' Colors&lt;/span&gt;
                      &lt;span class="ProPrice"&gt;$' . $row["ProductPrice"] . '&lt;/span&gt;
                      &lt;a href="?Product=' . $row["ProductID"] . '" class="viewdetails"&gt;&amp;nbsp;&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;';  
  
                  }                           
              }
  }
  
          echo '&lt;/ul&gt;&lt;/div&gt;';
  </code></pre>