Google Like Suggestion Search
Suggest Search Using PHP and Jquery :
Google Like Suggest Search is achieved using PHP ,jquery and Ajax.Using These we can create a good looking suggestive search as like google’s suggest search.So to achieve google like Suggest search i came today with ajax powered jquery Suggestion search.The Suggestive search is useful as it is very much user friendly and provide him/her relevant results.So lets move forward and see how to use this suggest search plugin.So i name this Plugin Jsuggest suggest search .
[jcolumns inbordercss=”1px solid #e2e2e2″ outbordercss=”1px solid #999999″]
[jbutton icon=”globe” size=”xlarge” newpage=”yes” link=”http://demo.designaeon.com/jsuggest/”]LIVE DEMO[/jbutton]
[jbutton icon=”download” size=”xlarge” link=”http://download.designaeon.com/jsuggest.rar”]DOWNLOAD[/jbutton]
Suggest Search : : Files:-
For this Jquery suggestion search we are going to use the Following files.
- Search Form File (index.php): where our search form resides. In this case i am having the search form in index.php .
- style.css :contains the Style.
- Jquery Library(jquery.js) : The Jquery Framework Library.
- Config.php :Contains the configuration and dbase connection and other constant we need in suggestion search.
- suggestion.js : Contains the Jquery code which sends ajax request and receives data from process.php.
- Process.php :contains the code to fetch relevant keywords regarding to types search Query.
Suggest Search :: Usage:-
Now We know Which Files Are Required to get and fully working ajax suggestion search .you just need to download all the files from the link below and just edit a file to make this search suggestion tool working. Now we Move forward and see what we need to do so that we can include search Suggestion in our project.
Jquery PHP Suggest Search :: Include files:-
The First Step to use jsuggest suggestive search is to include all the necessary files in our project.All the files are given in the download link at the end or start of the post.we need to include style sheet , jquery and the suggestion.js file where we want to put our main search form.
<link rel="stylesheet" href="style.css"/>
Suggest Search :: Add Search Form:-
lets see How to add Suggest Search Form in our webpage.To add the search form just add the following code to your webpage in any area where you want it to render after including the files above on the same page.
<?php $name = isset($_GET['name']) ? $_GET['name'] : "" ; ?>
<form method="get" id="SearchForm">
<div id="wrapjsuggest" style="">
<input type="text" name="name" autocomplete="off" id="SearchBox" class="jsuggest" onkeyup="suggestme(this.value,event)" value="<?php echo $name; ?>"/>
<div id="suggestmeList"> </div>
<input type="submit" name="Search" Value="Search" class="mainbutton"/>
Jquery Suggestion Search :: Edit Files:-
As I said we only need to edit one file which is config.php ,all other files must remain same .so lets take a look at config.php file.
//param to edit//
$host="localhost"; //your host
$user="root"; // user name for PHP my admin
$pass=""; //password for php myadmin
$db="test"; //database name
$table="countries"; //table name
$column="country" ; //the column name which you want toshow up in relevant results
$limit=10; // LIMIT for results
//param to edit//
die("cound not connect ".mysql_error());
In the Config.php file you need to rename the above given variables according to your database configuration.You need to rename $host,$user ,$pass ,$db ,$table ,$column and $limit variables .It quite simple i guess.
After that the suggestion search will work fine . That is it.Demo Download
That is All I hope You Enjoyed this post.Also IF you want to change the Styles you can do it by tweaking the stylesheet ,but keep in mind it should not break the layout.
Do share and hit like if you loved this post.Thanks for visiting designaeon.com