jQuery Autocomplete for Email with Example

5 mins0
jQuery Autocomplete for Email with Example

In web development, autocomplete or suggestions plays a pivotal role in our personal and professional lives. It’s where a simple jQuery autocomplete feature can significantly enhance user experience by suggesting or completing email addresses in real time.

In this post, we’ll see how to implement jQuery autocomplete for email addresses, ensuring an efficient and error-free user input process.

Imagine you have a web form where users are required to enter email addresses. To simplify the process and reduce the chances of errors, you can incorporate a jQuery autocomplete feature that suggests or autocompletes email addresses as users type.

Set up the HTML Markup

First of all, create a standard HTML document with an input field where users will enter their email addresses. Let’s create an input field with ID as “email-input” and also include CDNs for jQuery and jQuery UI.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple jQuery Autocomplete for Email</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  </head>
  <body>
    <input type="text" id="email-input" placeholder="Enter email address" />

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

Implement the jQuery Autocomplete

Now, it’s time to write the JavaScript code enabling the autocomplete feature on the email input field. Add the following code within a script tag, after CDN links and before closing the body tag:

$(function() {
  var emailList = [
    "john@example.com",
    "jane@example.com",
    "smith@example.com",
    "emma@example.com",
    "david@example.com",
    "sarah@example.com",
    "michael@example.com",
    "laura@example.com",
    "chris@example.com",
    "olivia@example.com",
    "james@example.com",
    "emily@example.com",
    "andrew@example.com",
    "hannah@example.com",
    "matthew@example.com",
    "ava@example.com",
    "daniel@example.com",
    "grace@example.com",
    "benjamin@example.com",
    "mia@example.com",
    "samuel@example.com",
  ];

  $("#email-input").autocomplete({
    source: emailList,
    autoFocus: true,
    delay: 100
  });
});

Here, we have created an array of dummy email addresses. You need to replace those emails with actual ones or even get those emails dynamically.

Customize and Enhance

To provide a more user-friendly experience, you can customize the appearance and behavior of the autocomplete feature. The example above includes two options:

  • autoFocus: true ensures that the first suggestion in the dropdown is automatically selected, saving users an additional click.
  • delay: 100 introduces a slight delay (in milliseconds) before the suggestions appear, preventing the dropdown from overwhelming users with immediate results.

Conclusion

In this example, we have implemented jQuery autocomplete feature for email addresses. This enhancement will save users valuable time and contribute to a seamless and efficient web experience. There are plenty of other configuration options you can use as per your requirements.

Related Articles