Autocomplete on email extension

Autocomplete on email extension
0.0 0

#1

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: {}) {
    super(props);

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

  handleSubmit(e: any) {
    e.preventDefault();
    this.setState({
      email: this.state.email
    })
  }

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

 render() {
  return (
     <div>
        <form onSubmit={ (e) => this.handleSubmit(e) }>
          <input
            type='text'
            placeholder='someone@example.com'
            value={ this.state.email }

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


}

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


#2

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?


#3

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

18%20AM

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

33%20AM


#4

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

#5

@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.