JQuery autocomplete example with database accessing

15

How can I create text box or drop down box using jquery autocomplete feature with database accessing.It is happening when you are pressing keys in that field.Then call to the database to get records.First you must access jquery-ui auto complete library files.

Here is a php front-end file.First include the jquery library file and jquery-ui.css,jquery-ui.min.js files.

This is the data.php file to get and send the records of the database.

If you want to change auto complete styles change add the following stylesand change that as you want.

View Demo

Download JQuery autocomplete with database accessing Example (3 KB)

Share.

About Author

Sumith Harshan is the Web Engineer Specializes in Java Script, JQuery, HTML4/5, CSS2/3, PHP, CodeIgniter, CakePHP, J2SE, J2EE, XML, Hacking & Security, Mobile Interface Developing, Magento, Wordpress, Joomla, Drupal,PHPBB,Facebook App Developing and Open cart...etc.

  • Rajpal

    In above code data.php file replace

    $q = strtolower($_GET[“findword”]);
    with $q = strtolower($_GET[“term”]);

    • I put the strtolower($_GET[“term”]); in the source code file.In this article I put strtolower($_GET[“findword”]); because readers can understand it easily.But same effect…..

      • Actually, it’s just confusing; I thought this code was useless because it just didn’t work when I tried it. Then I read the comment about putting “term” – and it worked.

  • Cristian

    Sumith

    Thank’s a lot from Chile 😉 ,your code is the best for me ,it works

  • rai

    hi sumith..Good day! i just want to ask how can i search a multiple column ?
    thanks for the code 🙂 keep it up!

  • shiru

    database file cant open in your site

    • Full source code can download and it’s opening without any errors.
      Try to download again. may be curruptted when you download.
      thanks

      • shiru

        ok…sir…

        sir i have a problem on wordpress i m try to use this code in post type so how can use autocomplete to find the post_title………plz send me database code and all code

  • ankul kumar

    sir i have need chat code but not download chat code for your website

  • Dealguroo

    Hello sir,

    if i use this js file

    my $( “selector” ).dataTable is not working.

  • Dealguroo

    Hello sir,

    if i use this js file

    my $( “selector” ).dataTable is not working.

    • This is old jquery library file (1.4). old jquery file may be conflicting with data table new lib files. So you can use latest one.

      If you already loaded jquery lib file no need to call again to it.

      thanks