Autocomplete on email extension

Autocomplete on email extension
0.0 0


Hi everyone,

I am trying to validate form email input and build it with autocomplete in ReactJS. I am catching the @ sign at onChange like so:

// Just one clarification, it's react and TypeScript not javascript but, 
// they don't have  different behaviours in my case I think only the way I specify props, 
// state and types here are different. you can think of it as if you are dealing with JavaScript for those who are not familiar with typescript

import * as React from 'react';
class MyComponent extends React.Component<{}, IState> {
constructor(props: {}) {

    this.state = {
      email: '',
      initialExts: ['', '']  // and so on

  handleSubmit(e: any) {

  handleChange(e: any) {
   // 👈 this will give me the final character I am typing
    if ( === '@') {
       // I think here I need to do the functionality to pop up the initialExs
    this.setState({ email: })

 render() {
  return (
        <form onSubmit={ (e) => this.handleSubmit(e) }>
            value={ }

            onChange={ (e) => this.handleChange(e) }
          <button type='submit'>Check Email</button>


interface IState {
  email: string;
  initialExs: Array<string>;

What I am exactly asking for is something like the following attachment in the first replay to @vipatron 's comment

Please let me know if my question is not clear. Thanks in advance


I’m learning React myself, so I don’t think I can help, but I am also not sure what you are asking. Are you asking someone to help you refactor the pseudocode:
// I think here I need to do the functionality to pop up the initialExs?


Well, what I am asking is something like the following attachment to popup after writing @ sign


and then when I write for example y inside textfield it shows only like the following attachment



I implemented that autocomplete functionality in my Wiki viewer ( codepen: wikiviewer project ) based on some stack overflow answer^^

I’m not sure on what you’re asking for ( a pseudo-code? a snippet? help with some trouble?) but in short here is what i did in my basic implementation:

  • to have a set of data (the list of providers)
  • to trigger a search function everytime you type/del a character in the input field (if you want to start the search after a character is typed you can use some reg exp …dunno, something like /^@/ or similar)
  • to display the result of that search in a div appended just below the input field


@Layer if you look my reply to @vipatron, I think you might get an idea of what I am trying to achieve and I am using react. Thanks for your great reply by the way.