August 29, 2013 3:59 pm

How to Integrate live search in PHP and MySQL with jQuery

I have received many requests from my readers for live search in PHP and MySQL with jQuery, so today i have decided to write a tutorial how to integrate live search in PHP and MySQL with jQuery. Searching is one of the most required feature in web sites and if it will be live searching it will show you fast result on page. In this tutorial we will create a database and a table insert records and start searching in it.

live-search-php-mysql-with-jquery

Database Details:

database name => phpgang
table name => live_search
column names => id, name, email

db.sql

Database file run in your mysql to create database and add data in table.

 db.php

Database configuration file edit database name, user and password as per your configuration.

 index.php

Your index file where you have to add text box and include js and css.

 JavaScript

Here is the javascript you need to add in you file which can show you data on key press.

 CSS

CSS i have used in this tutorial  to show result well decorated as below.

Last file you have to create to fetch results from database.

result.php

I have used direct mysql queries to fetch records but you can also use mysqli or PDO as mysql_connect deprecated in PHP 5.5.

Please share your comments and feedback.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • Bala

    What if needed more than 1 input?

  • Hafujin.Desu

    Hi, I want to direct url when I search? Please help me.

    • huzoorbux

      Edit this line and add anchor tag in result.php.

       

  • file needed

    Trying to download the file. I’ve subscribed and clicked the link you emailed me but I still get:

    Sorry no email found subscribe below

    when trying to download the file.

  • aneet

    Your other scripts are easy and pretty but not this one. Requires much work it doesn’t work on arrow up and down and also it should get selection in text box on enter

  • Husni’s Elemento

    I hope for the next tutorial you should use secure code. like OOP or PDO.

  • Gus

    when i click the picture or $final_username, nothing happens.
    everything is fine only if i click everywhere else.

    any ideas?

  • Mickz

    hello! how can i get primary key id of selected value from database using this method? thanks for your help. 😀

  • mohicanin

    and again – simple tutorial which should help people, and such dumb mistakes?
    type: “POST”, url: “search.php”….
    but there’s no “search.php” file, because you called it…. result.php?

    • huzoorbux

      Sorry for that mistake, now its fixed.

  • gobind

    when you click the bold part of the search query result it dosent select the query…any solution to this please?…..it works if there is no formatting ie around the $q in the javascript file

    • Morten Hjerl-Hansen

      Workaround:

      jQuery(“#result”).live(“click”,function(e){
      var $clicked = $(e.target);
      if (e.target.nodeName == “STRONG”)
      $clicked = $(e.target).parent().parent();
      else if (e.target.nodeName == “SPAN”)
      $clicked = $(e.target).parent();
      var $name = $clicked.find(‘.name’).html();
      var decoded = $(“”).html($name).text();
      $(‘#searchid’).val(decoded);
      });

  • zohaib

    i can’t download file plz give another link

  • Kristiqn Aleksandrov Terziev

    Hi how can i get the id of the element that is clocked?

  • Nick

    I do also have this problem:

    “when i click the picture or $final_username, nothing happens.
    everything is fine only if i click everywhere else.

    any ideas?”

  • Habib ullah

    thanks for sharing this tutorial

  • Ramesh

    it is working only if you add html.inc file….but if i remove this file it does not work

  • kamal

    Please update the jquery code

    • Pro

      Here you go…

      $(function(){
      $(“.search”).keyup(function()
      {
      var searchid = $(this).val();
      var dataString = ‘search=’+ searchid;
      if(searchid!=”)
      {
      $.ajax({
      type: “POST”,
      url: “result.php”,
      data: dataString,
      cache: false,
      success: function(html)
      {
      $(“#result”).html(html).show();
      }
      });
      }return false;
      });
      jQuery(“#result”).live(“click”,function(e){
      var $clicked = $(e.target);
      var $name = $clicked.find(‘.name’).html();
      var decoded = $(“”).html($name).text();
      $(‘#searchid’).val(decoded);
      });
      jQuery(document).live(“click”, function(e) {
      var $clicked = $(e.target);
      if (! $clicked.hasClass(“search”)){
      jQuery(“#result”).fadeOut();
      }
      });
      $(‘#searchid’).click(function(){
      jQuery(“#result”).fadeIn();
      });
      });

  • Marcello Patto

    I got this error: Warning: mysql_fetch_assoc() expects parameter 1 to be resource, string given in /home/webrokercom/public_html/simulador/result.php on line 12
    What is wrong, please?

    Tks!

    • Chris Serella

      That error means there is likely an error in your query you need to add the following between the closing bracket and semicolon in the mysql_query line:

      or die(mysql_error())

  • Mahmoud

    Thanks a lot. It is working fine but I want to display the candidate’s rest details from table after clicking on his name from the drop down list. How can I call the other script doing that and passing the selected candidate id to it?

  • Pro

    Fixed JavaScript:

    $(function(){
    $(“.search”).keyup(function()
    {
    var searchid = $(this).val();
    var dataString = ‘search=’+ searchid;
    if(searchid!=”)
    {
    $.ajax({
    type: “POST”,
    url: “result.php”,
    data: dataString,
    cache: false,
    success: function(html)
    {
    $(“#result”).html(html).show();
    }
    });
    }return false;
    });
    jQuery(“#result”).live(“click”,function(e){
    var $clicked = $(e.target);
    var $name = $clicked.find(‘.name’).html();
    var decoded = $(“”).html($name).text();
    $(‘#searchid’).val(decoded);
    });
    jQuery(document).live(“click”, function(e) {
    var $clicked = $(e.target);
    if (! $clicked.hasClass(“search”)){
    jQuery(“#result”).fadeOut();
    }
    });
    $(‘#searchid’).click(function(){
    jQuery(“#result”).fadeIn();
    });
    });

    • name

      Thanks buddy for fixing, now it works 😉

      • Pro

        Cheers! 😉

    • Victor BillVijo Matalanza

      hellow what if i want to make the filted result to open in another pager where should i put my link???

      sorry for my poor english but i hope you understand

    • Thank you for this tutorial, and thanks Pro for this fix!

      I have a question: How do we make the result box to disappear when we click somewhere else OR press Esc button? Thanks!

  • Brock

    the site example doesn’t even work there…

    • Its working perfect please check again.

      let me know which browser you are using?

  • taj

    hi ! when click on image and text then it’s not display result in text box.. i display in image..pls give me code for this thank you for old code it’s nice

  • taj

    hi ! when click on image and text then it’s not display result in text box.. i display in image..pls give me code for this thank you for old code it’s nice

  • taj

    hi ! when click on image and text then it’s not display result in text box.. i display in image..pls give me code for this thank you for old code it’s nice

  • taj

    hi ! when click on image and text then it’s not display result in text box.. i display in image..pls give me code for this thank you for old code it’s nice

  • Dwayne

    This is a really good tutorial. How ever have you ever thought about writing a tutorial were you break each major line down and explain what it’s doing? For those of us who read this to learn and not too steal your work for our site, it would be beneficial. And once word got out that you are doing that you would have a lot more readers.

  • name

    Thanks Huzoor for share the code 😉

  • amit

    Hi Huzoor,

    I have country and city database [cities more then 2 L]. My Ajax search is very slow i have used indexing as well. can you please give me any idea.

  • TALHA AHMED

    i want to use it in wordpress

  • daniel

    Great tutorial!

    If i have in database “HTC Desire” and i search for “htc” it will lowercase the term and brings “htc Desire”… but i want it to appear as it is in database “HTC Desire”. How can i do that?

    And another thing. Now we select the result and then click on search … I want to be able to click directly on the results from search list. How can i do that?

    Thanks