PHP AJAX Autocomplete Search

This tutorial provides a comprehensive guide on implementing an autocomplete search feature using PHP and AJAX. The autocomplete function enhances user experience by offering suggestions as users type in a search box.

Key Concepts

• AJAX (Asynchronous JavaScript and XML): A technology that enables web pages to update asynchronously by exchanging data with a server in the background. This allows parts of a webpage to be refreshed without reloading the entire page.
• Autocomplete: A functionality that suggests possible completions for a text input field based on a predefined list of options as the user types.

Steps to Implement Autocomplete

1. Create a Database:
   • Store the data you want to use for autocomplete suggestions, such as a list of product or user names.
2. Set Up the PHP Script:
   • Write a PHP script that connects to the database and retrieves suggestions based on user input.
3. Create the HTML Form:
   • Use an input field for user queries.
4. Add AJAX Functionality:
   • Utilize JavaScript to send user input to the PHP script and display results dynamically.
5. Display Suggestions:
   • Format and display results returned from the PHP script in the suggestions div.

Example of displaying results:

while ($row = mysqli_fetch_assoc($result)) {
    echo '<div>' . $row['name'] . '</div>';
}

Example AJAX code:

document.getElementById('search').addEventListener('keyup', function() {
    var query = this.value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'search.php?query=' + query, true);
    xhr.onload = function() {
        if (this.status == 200) {
            document.getElementById('suggestions').innerHTML = this.responseText;
        }
    };
    xhr.send();
});

Example HTML:

<input type="text" id="search" placeholder="Search...">
<div id="suggestions"></div>

Example code snippet:

$query = $_GET['query'];
$result = mysqli_query($conn, "SELECT name FROM users WHERE name LIKE '%$query%'");

Conclusion

Implementing an autocomplete search feature using PHP and AJAX significantly enhances the interactivity of web applications. By following the outlined steps, even beginners can create a functional autocomplete search box that provides real-time suggestions based on user input.