Jump to content

Ajax Auto Suggestion Search From Database


xbl1

Recommended Posts

I am implementing a Ajax auto suggestion search from database. I find an example from http://www.roscripts.com/Ajax_autosu...abase-154.html . I have not problem with the php part about search from database, but i got a problem from the search from, i added a listerner to input tag, but it still not auto suggest anyword when i type any of word, Could any one help me, Thanks.

<html> <head> <title>roScripts - Ajax auto-suggest</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="lib/prototype.js" type="text/javascript"></script> <script src="src/scriptaculous.js" type="text/javascript"></script> <script src="src/unittest.js" type="text/javascript"></script> <script src="lib/builder.js" type="text/javascript"></script> <script src="src/controls.js" type="text/javascript"></script> <script src="src/effects.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="container"> <form method="post" action="response.php"> <label for="testinput">Search</label><br /> <input type="text" id="search" name="search" autocomplete="off" class="input" value="" onkeyup="autoSuggest();" /><br /> <div id="update" style="display:none;position:relative;"></div> <input type="image" name="register" class="submit-btn" src="

http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" /> </form> <script type="text/javascript" language="javascript" charset="utf-8"> function autoSuggest(){ new Ajax.Autocompleter('search','update','response.php', { tokens: ','} ); Autocompleter.show(); } </script> </div> </body> </html>

user_online.gifreputation.gif report.gif progress.gif

Link to comment
Share on other sites

yes, there are some errors in his code, but i have fixed the search size and it works for searching string from database now, but i still not figure out about the form and javascript part----do the auto suggestion thing, anywhere thanks:)

Link to comment
Share on other sites

I don't know anything about Scriptacolous, but you could really put this code online! And please rephrase your question ... what exactly is the problem? Is the event not properly attached?No AJAX request to the server?No response?No output? Give us some hints ...

Link to comment
Share on other sites

the problem is the auto suggest is not working, when i type any of string into textbox, does not auto offer suggestion as google search engine does.i want to do as following:

  • Whenever a keyup event on a textbox occur, a function in javascript is called which uses ajax to send the input in the textbox to the server
  • The server receives the input and check for any matches in the database
  • The matched result is sent back to the client side javascipt code, ajax, and then the result is shown in an absolute positioned div just under the input box.

Link to comment
Share on other sites

The following is respone.php, it works.

 <?phprequire_once('db.php'); include('classes/stem.php'); include('classes/cleaner.php');  if( !empty ( $_POST['search'] ) )   $string = $_POST['search']; 			   function get_stemmer($string){				 $stemmer = new Stemmer;   $stemmed_string = $stemmer->stem ( $string );				 return $stemmed_string;			   }			    $string=explode(" ",$string);			    $size=sizeof($string);			   			    $i=0;			    $stemmed_string="";			    while($i<$size){			  				  $word=get_stemmer($string[$i]);				 				  $stemmed_string .= " " . $word;				   $i++;			    }			      $clean_string = new jSearchString();  $stemmed_string = $clean_string->parseString ( $stemmed_string ); 			    echo $stemmed_string . "<br />";    $new_string = '';  foreach ( array_unique ( split ( " ",$stemmed_string ) ) as $array => $value )  {   if(strlen($value) >=3)   {							   	$new_string .= " " .$value.' ';   }  }			    echo $new_string . "<br />";  $new_string = substr ( $new_string,0, ( strLen ( $new_string ) -1 ) );				  echo $new_string . "<br />";			      if ( strlen ( $new_string ) > 3 )     $split_stemmed = split ( " ",$new_string );									   		    $sql = "SELECT DISTINCT COUNT(*) as occurences,id, title, subtitle FROM articles WHERE (";			     while ( list ( $key,$val ) = each ( $split_stemmed ) )   {			    if( $val!='' && strlen ( $val ) > 0 )			    {			     $sql .= "((title LIKE '%".$val."%' OR subtitle LIKE '%".$val."%' OR content LIKE '%".$val."%')) OR";			    }   }   					    $sql=substr ( $sql,0, ( strLen ( $sql )-3 ) );//this will eat the last OR   $sql .= ") GROUP BY title ORDER BY occurences DESC LIMIT 10";					    echo $sql . "<br />";  					   $result=mysql_query($sql,$con)or die(mysql_error());   $total = mysql_num_rows ( $result );   if($total>0){ 	  while($row = mysql_fetch_array($result)){		 	  echo  $row['id'].'------'.$row['title']."\n";	  echo '  --------  '.$row['subtitle']."\n";		 	 }	 						 } 		 ?>

Link to comment
Share on other sites

So, are you checking for Javascript errors? You can use a tool like Firebug or Chome's developer tools to see the ajax request going out, so that you can verify it's going out, what data it contains, and what the response from the server is.

Link to comment
Share on other sites

Ok, just looked for a while into the Scriptacolous Docu. Please read the AutoCompleter Documentation. I can give you some hints:

  • AutoCompleter is instantiated with frequent updates (default: 0.4s). Therefore => no onkeyup ... that's senseless. You have to call AutoCompleter if the DOM is ready.
  • Autocompleter.show(); ? What's this? You wanted your <div id="update"> to show up, right? Wait for the callback of the AutoCompleter (see docu), than show() your #update.
  • autocomplete="off" in your input? I don't know wherefore this is, but it sounds weird.
  • Your token is: tokens: ','. But you are returning your Data (response.php) with "\n" as token.

As justsomeguy pointed out, take a look at a debugging console and watch out for errors. Also watch the network log, to see, if a new request is set, if you type in the box Hope I could help!

Link to comment
Share on other sites

autocomplete="off" in your input? I don't know wherefore this is, but it sounds weird.
The autocomplete attribute turns off the browser's default autocomplete so that Javascript can put its own instead.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...