How to Autocomplete Textbox Using jQuery,PHP and MySQL

admin | Posted on May 13, 2021 |

This tutorial we will show you how to create autocomplete textbox using jQuery, PHP and MySQL.When user enter some letter a box with some related words will display and you can select the word from that box.This is all done with the help of jQuery UI you have to download it to create autocomplete textbox. You may also like Live Search in php with Ajax and Mysql.

HTML Code

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="https://scripts.guru/front/js/jquery-ui.css" rel="Stylesheet"></link>
        <script src="https://scripts.guru/front/js/jquery-ui.js"></script>    
        <script type="text/javascript">
            $(function ()
            {
                $("#coding_language").autocomplete({
                    source: 'autocomplete.php'
                });
            });
        </script>
    </head>
    <body>
        <div id="wrapper">

            <div class="ui-widget">
                <p>Enter Coding Language</p>
                <input type="text" id="coding_language">
            </div>

        </div>
    </body>
</html>

PHP Code (autocomplete.php)

<?php
define('DB_SERVER', "localhost");
define('DB_USER', "root");
define('DB_PASS', "");
define('DB_DATABASE', "ieltsmedidb");
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);

$searchTerm = $_GET['term'];
$select = mysqli_query($con, "SELECT * FROM medical_student WHERE student_name LIKE '%" . $searchTerm . "%'");
while ($row = mysqli_fetch_assoc($select)) {
    $data[] = $row['student_name'];
}

echo json_encode($data);
?>

Leave a Reply Cancel reply