Creating email autocomplete with name and address search functionality like Gmail using jQuery

Other Questions Gmail
1

I’m working on building an email recipient selector that works similar to Gmail’s autocomplete feature. I want users to be able to search for contacts by typing either their name or email address.

Currently I have a basic jQuery autocomplete setup working:

$("#recipient-field").autocomplete(contactList, {
    multiple: true,
    mustMatch: true,
    autoFill: true
});

What I need is to expand this so my contact data includes both display names and email addresses in this format:

"John Smith" <[email protected]>
"Sarah Johnson" <[email protected]>
"Mike Davis" <[email protected]>

The goal is that when someone types “John” or “john.smith” both should match the first entry. How can I modify my autocomplete to search through both the name portion and email portion of each contact entry? I want the search to work seamlessly regardless of whether the user starts typing the person’s name or their email address.

2

try using the source option directly. create a function that separates each contact’s name and email, then check against your input. just see if the name or email contains the substring you’re typing - it keeps it simple and effective!

3

I built something like this last year. The key is preprocessing your contact data instead of just using the autocomplete plugin’s matching. I wrote a normalized search function that pulls out both name and email from each contact string. Used regex to parse the format and created searchable tokens from both parts. When someone types, I filter the contact array by checking if their input matches any token from the name or email. The trick is keeping the original formatted string for display while searching against the parsed pieces. I also added logic for partial domain matching since people often just remember the company domain. This gave me way more control over matching than trying to configure the autocomplete plugin by itself.

4

Override the default matching with a custom source function. I hit this same issue building a contact picker for our CRM. Don’t use the plugin’s built-in matching - parse each contact entry yourself to pull out the name and email separately, then run your search against both fields. Split on the angle brackets to grab the name and email parts, then use indexOf or includes to see if the user’s input matches either one. The autocomplete still handles the UI and selection stuff, but you control what gets returned. Plus you can weight the results - like showing name matches before email matches.