jQuery AutoComplete Tutorial 🎯

Welcome to our comprehensive guide on jQuery AutoComplete! In this tutorial, we'll dive deep into understanding and implementing the AutoComplete feature using jQuery. Let's get started!

What is AutoComplete? 📝

AutoComplete is a useful feature that helps users to select options from a dropdown list as they type, saving them time and effort. It's widely used in search boxes, suggesting possible matches as the user types.

Why Use AutoComplete? 💡

AutoComplete improves user experience by providing relevant suggestions and reducing the number of keystrokes required. This leads to faster and smoother interaction with the application.

Setting Up jQuery 📝

Before we dive into AutoComplete, let's make sure you have jQuery included in your project. Add the following script tag to your HTML file:

html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Creating an AutoComplete Feature 🎯

Here's a simple example of an AutoComplete feature using jQuery. We'll create a search box that suggests cities as the user types.

HTML Structure

html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Other head content -->
</head>
<body>
  <label for="city">City:</label>
  <input type="text" id="city" name="city">
  <ul id="city-suggestions"></ul>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- Our AutoComplete script -->
  <script src="autocomplete.js"></script>
</body>
</html>

JavaScript (autocomplete.js)

javascript

$(document).ready(function () {
  var cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "San Diego", "Dallas", "San Jose"];

  $("#city").on("input", function () {
    var userInput = $(this).val().toLowerCase();
    var suggestions = cities.filter(function (city) {
      return city.toLowerCase().indexOf(userInput) > -1;
    });

    $("#city-suggestions").empty();

    for (var i = 0; i < suggestions.length; i++) {
      $("#city-suggestions").append("<li>" + suggestions[i] + "</li>");
    }
  });
});

In this example, we've created a search box (#city) and a list (#city-suggestions) to display the suggestions. When the user types something in the search box, we filter the cities array based on the user input and display the suggestions in the list.

Advanced AutoComplete 🎯

In real-world projects, you might need to fetch data from an API instead of hard-coding it like in our example. Here's how you can do that:

HTML Structure

html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Other head content -->
</head>
<body>
  <label for="city">City:</label>
  <input type="text" id="city" name="city">
  <ul id="city-suggestions"></ul>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- Our AutoComplete script -->
  <script src="autocomplete_api.js"></script>
</body>
</html>

JavaScript (autocomplete_api.js)

javascript

$(document).ready(function () {
  $("#city").on("input", function () {
    var userInput = $(this).val().toLowerCase();
    $.ajax({
      url: "https://api.example.com/cities?q=" + userInput,
      dataType: "json",
      success: function (data) {
        $("#city-suggestions").empty();
        for (var i = 0; i < data.length; i++) {
          $("#city-suggestions").append("<li>" + data[i].name + "</li>");
        }
      },
      error: function (xhr, status, error) {
        console.error(error);
      }
    });
  });
});

In this example, we're using jQuery's AJAX function to fetch data from an API. The API returns a JSON object containing city names. We then display the city names in the list (#city-suggestions).

Quiz Time! 🎯

That's it for our AutoComplete tutorial! We hope you enjoyed learning and implementing the AutoComplete feature using jQuery. Happy coding! 💻🎉