Breaking News
You are here : Home / Web development / Ajax / Google Like Suggestion Search
Search Suggest using jquery Php

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]

[jcol/]

[jbutton icon=”download” size=”xlarge” link=”http://download.designaeon.com/jsuggest.rar”]DOWNLOAD[/jbutton]

[/jcolumns]

Suggest Search : : Files:-

For this Jquery suggestion search we are going to use the Following files.

  1. Search Form File (index.php): where our search form resides. In this case i am having the search form in index.php .
  2. style.css :contains the Style.
  3. Jquery Library(jquery.js) : The Jquery Framework Library.
  4. Config.php :Contains the configuration and dbase connection and other constant we need in suggestion search.
  5. suggestion.js : Contains  the Jquery code which sends ajax request and receives data from process.php.
  6. Process.php :contains the code to fetch relevant keywords regarding to types search Query.
So these are the all the files that we are going to need here , We do not need to edit all the files to get ajax suggestive search working .We just need to modify “config.php“. But incase you want to build your own suggestive search i’m gonna show you all files here ,you can just copy paste them and modify them .But for a quick installation u just need to change config.php ,and the suggest search will work fine .You can change styles if you want to.

[separator /]

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.

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.

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.

Config.php File:

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

[separator /]

Tags : , , , ,

2 Replies

  1. haresh says:

    thanks

  2. manpreet says:

    Well done it is a useful code

Leave a Reply

Want to join the discussion ? Feel Free to contribute !