[SOLVED] Search without refreshing page...

[acctman]

can anyone assist me with info on how to create a ajax search where the result are show on the same page without refreshing?

[DarkSuperHero]

what is your comfort level with JS and PHP ? Google "Ajax tutorial" and well build off that...your basically submitting POSt or GET data, and the PHP script is returning text/html....so that would be it in a nutshell...

 

Post what parts your having trouble with grasping and getting to work...

[acctman]

when the page loads the test example that i have set in csearch.php appears perfectly. Now i want to attach csearch.php to a form submit and have the results appear in the "chub" div id. what do i need to do to make this happen.

 

<form method=post enctype="multipart/form-data" name="clookup" id="form" action="hub/csearch.php">
<input id="look" size="20" type="text">
<input type="submit" name="submit" value="submit" />
</form>

<!-- results -->
<script type="text/javascript" src="/js/ajax.js"></script>
<div id="chub" style="width:260px;height:182px;margin-left:35px;"></div>
<script>getdata(/csearch.php','chub');</script>						
<!--/results -->

[fry2010]

you will need to obvoisly get the main ajax.js class that will set up your xmlHttpRequest.

Then you will need to create your own function to work with this form.

 

Something along the lines of:

 

var search_results = new function()
{
this.ajax = null;
this.search_form = null;
this.search_field = null;
this.results = null;
// basic variable inititialising...

this.init = function()
{
    var self = search_results;
    self.ajax = new Ajax();
    self.search_fiorm = document.getElementById('search_form');
    self.search_field = document.getElementById('search_field');
    self.results = document.getElementById('results');
  };

this.onKey = function(e)
{
    var self = search_results;
    if(!e)
    {
       e = window.event;
    }
    if(e.keyCode != 13)
    {
      // KEYCODE 13 = ENTER BUTTON
      self.check_search_field();
    }
  };

  this.check_search_field = function()
  {
    var self = search_results;
    var post_data = '';

    if(self.search_field.value.length > 0)
    {
      post_data = formData2QueryString(self.search_field);
      self.ajax.doPost('/csearch.php', postData, self.search_response);
    }
  };

  this.search_response = function(str)
  {
    var self = search_results;
    var results = self.results;
    var csearch_feedback = str.split(',');
    var array_length = csearch_feedback.length - 1; // THIS IS TO PREPARE FOR LOOP

    // BEFORE WE DISPLAY THE RESULTS, WE NEED TO REMOVE ANY CURRENT TEXT INSIDE THE RESULTS DIV, OTHERWISE IT WILL KEEP ADDING THE SAME RESULTS ON TOP OF EACH OTHER.
    if(results.hasChildNodes())
    {
      while (results.childNodes.length >= 1)
      {
        results.removeChild(results.firstChild);
        results.nodeValue = '';      
      } 
    }

    for(i = 1; i < array_length; i++)
    {
      results.appendChild(document.createTextNode(csearch_feedback[i]));
      results.appendChild(document.createElement('br')); //CREATE ELEMENT <BR />
    }
  };

}; // END THE WHOLE FUNCTION HERE

window.onload = search_results.init;
window.onkeypress = search_results.onKey;
      

 

You will also need to create a cleanup function to null the values of the elements created for IE memory leak problem. I leave it to you.

 

with your php page you will need to pass back the results in a loop for each result given and put a ',' comma between them, then the function search_response will create an array of these search results. Basically returning a csv format.

 

Also this is going to display new results everytime the user enters a letter/number in the search field, you could do it so it only checks when they press the enter button or click the search button.

 

Also the formData2QueryString is actually another js class file that you can download, google it and link it in your html/php document so that this function can use it.

 

If you dont understand any of this, you need to do tutorial.

[acctman]

i have this ajax.js script is this the same? also do you know of a complete example i can look at... this is a lot more complex than i thought. I'm not thats good with js so a lot of this is foreign

 

// here we define global variable
var ajaxdestination="";

function getdata(what,where) { // get data from source (what)
try {
   xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
  		new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { /* do nothing */ }

document.getElementById(where).innerHTML ="<center><img src='/simgs/ajax-loader.gif'></center>";
// we are defining the destination DIV id, must be stored in global variable (ajaxdestination)
ajaxdestination=where;
xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
xmlhttp.open("GET", what);
xmlhttp.send(null);
  return false;
}

function triggered() { // put data returned by requested URL to selected DIV
  if (xmlhttp.readyState == 4) if (xmlhttp.status == 200) 
    document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}

[code]

[fry2010]

that is similair but its not very adaptable code. It is a specific thing using the xmlHttpRequest.

Javascript is actually easier to pick up when I first thought. I recommend w3schools.com to read up about javascript. Once you know javascript, ajax is a piece of cake. It just sounds more complicated than it really is. The best thing to do is try a couple of examples, although if im honest online examples still dont make it 100% clear. If you really want to learn, buy a book that takes you through examples, its worth the money to understand it much better.

 

[acctman]

that is similair but its not very adaptable code. It is a specific thing using the xmlHttpRequest.

Javascript is actually easier to pick up when I first thought. I recommend w3schools.com to read up about javascript. Once you know javascript, ajax is a piece of cake. It just sounds more complicated than it really is. The best thing to do is try a couple of examples, although if im honest online examples still dont make it 100% clear. If you really want to learn, buy a book that takes you through examples, its worth the money to understand it much better.

 

 

i'll just keep searching for examples. i honestly do not want to spend to much time on this. i just wanted at add a quick lookup feature. not worth buying books or spending hours learning js. thanks though... i'll do some more search real quick.

[acctman]

this is a great easy to follow example : http://www.captain.at/howto-ajax-form-post-get.php

[fry2010]

i stand corrected on my earlier comment then.

Although again its not very adaptable, but at least its what you require.

Also it uses innerHTML instead of creating text nodes which goes against the docs, but browsers support it so, hey why not.