PHP 8 Autocomplete Textbox from MySQL Database Tutorial


Share:
 | Published By: Admin | Published On: May 25, 2022 | Category: PHP 8


Hi friends,

This post is focused on PHP 8 Autocomplete Textbox from MySQL Database Tutorial. step by step explain PHP 8 MySQL Ajax Live Search Autocomplete Example. We will look at example of Autocomplete Textbox with Jquery PHP 8 and MySQL. Here you will learn Implement jQuery AutoComplete TextBox from database using AJAX in php 8. Let's get started with Bootstrap Autocomplete Search Box / Textbox In PHP 8 MySQL.

I will give you simple Example of PHP 8 MySQL Ajax Autocomplete TextBox From DB.

So let's see bellow example:

index.php
<!DOCTYPE html>  
<html>  
    <head>  
        <title>PHP 8 Autocomplete Textbox from MySQL Database Tutorial</title>  
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>  
        <style>  
            ul
            {  
                background-color:#eee;  
                cursor:pointer;  
            }  
            li
            {  
                padding:12px;  
            }
        </style>  
    </head>  
    <body class="bg-dark">  
        <div class="container pt-5 mt-3">
            <div class="content">
                <div class="card mt-5">
                    <div class="card-header">
                        <h2 class="text-center">PHP 8 Autocomplete Textbox from MySQL Database Tutorial - Mywebtuts.com</h2>
                    </div>
                    <div class="card-body">
                        <label>Search User Name :</label>  
                        <input type="text" name="user" id="user" class="form-control mt-2" placeholder="Enter User Name" />  
                        <div id="userList"></div>       
                    </div>
                </div>
            </div>
        </div>
    </body>  
</html>  
<script>  
    $(document).ready(function(){  
        $('#user').keyup(function(){  
            var query = $(this).val();  
            if(query != '')  
            {  
                $.ajax({  
                    url:"search.php",  
                    method:"POST",  
                    data:{query:query},  
                    success:function(data)  
                    {  
                        $('#userList').fadeIn();  
                        $('#userList').html(data);  
                    }  
                });  
            }  
        });  
        $(document).on('click', 'li', function(){  
            $('#user').val($(this).text());  
            $('#userList').fadeOut();  
        });  
    });  
</script>
search.php
<?php  
    $connect = mysqli_connect("localhost", "root", "root", "aatman");  
    
    if(isset($_POST["query"])){  
        $output = '';  
        $query = "SELECT * FROM students WHERE first_name LIKE '%".$_POST["query"]."%'";  
        $result = mysqli_query($connect, $query);  
        $output = '<ul class="list-unstyled">';  
        
        if(mysqli_num_rows($result) > 0){  
            while($row = mysqli_fetch_array($result)){  
                $output .= '<li>'.$row["first_name"].'</li>';  
            }  
        }else{  
            $output .= '<li>User Not Found</li>';  
        }  
    
    $output .= '</ul>';  
    echo $output;  
    } 
?>
Output:

I hope it will help you....

Share: