jQuery Autocomplete Widget Tutorial

Welcome to our comprehensive guide on creating an Autocomplete Widget using jQuery! This tutorial is designed for both beginners and intermediates, so whether you're just starting out or looking to add some new skills to your toolkit, you're in the right place. 🚀

What is Autocomplete?

An Autocomplete widget is a user interface element that predicts and suggests possible completions of a user's input as they type. It's incredibly useful for reducing typing effort and improving user experience in forms, search bars, and more! 💡

Setting Up

Before we dive into the Autocomplete widget, let's make sure we have the necessary tools:

Include the jQuery library in your HTML file:

html

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

Creating the Autocomplete Widget

We'll create a simple Autocomplete widget for a city search form. Our data source will be a predefined array of city names.

HTML Structure

First, let's set up our HTML structure:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags and title -->
</head>
<body>
  <div class="search-container">
    <input type="text" id="city-input" placeholder="Search for a city...">
    <ul id="city-list"></ul>
  </div>
  <!-- Include jQuery library -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Our custom JavaScript file -->
  <script src="autocomplete.js"></script>
</body>
</html>

Create a new file called autocomplete.js and open it in your favorite code editor.

JavaScript

Now, let's write the JavaScript code for our Autocomplete widget:

javascript

$(document).ready(function() {
  // Our predefined city data source
  var cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix', 'Philadelphia', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'];

  // Cache our HTML elements
  var $input = $('#city-input');
  var $list = $('#city-list');

  // Store the index of the currently hovered city
  var hoveredCityIndex;

  // Function to display the city suggestions list
  function displayCityList() {
    $list.empty();

    // Filter the cities array based on user input
    var userInput = $input.val().toLowerCase();
    var filteredCities = cities.filter(function(city) {
      return city.toLowerCase().indexOf(userInput) > -1;
    });

    // Loop through the filtered cities and create list items
    filteredCities.forEach(function(city, index) {
      var $listItem = $('<li>').text(city);
      $list.append($listItem);

      // Set the hover event for each list item
      $listItem.on('mouseover', function() {
        hoveredCityIndex = index;
      });
    });
  }

  // Function to hide the city suggestions list
  function hideCityList() {
    $list.hide();
  }

  // Event listeners for user input and mouse events
  $input.on('input', displayCityList).on('mouseleave', hideCityList);

  // Hide the city suggestions list on page load
  hideCityList();
});

Practical Application and Quiz

Now that you've learned how to create an Autocomplete widget using jQuery, let's put it into practice. Update the cities array in autocomplete.js with your own data source and test the widget on your local machine.

Remember, practice makes perfect! Keep experimenting with different data sources and customizing the widget to better suit your projects. Happy coding! 🎉