SHARE
TWEET

Untitled

a guest Sep 17th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. constructor(props){
  2.     super(props);
  3.     this.items = [
  4.         'David',
  5.         'Sara',
  6.         'Jane',
  7.         'Daniel',
  8.         'Debra'
  9.     ];
  10.     this.state = {
  11.         suggesstions: []
  12.     };
  13. }
  14.  
  15. onTextChange = (e) => {
  16.     // console.log(e.target.value);
  17.     const value = e.target.value;
  18.     let suggesstions = [];
  19.  
  20.     if (value.length > 0) {
  21.         const regex = new RegExp(`^${value}`, 'i');
  22.         suggesstions = this.items.sort().filter(v => regex.test(v));
  23.     }
  24.     this.setState(() => ({ suggesstions }));
  25. }
  26.  
  27. renderSuggestions () {
  28.     const { suggesstions } = this.state;
  29.     if (suggesstions.length == 0) {
  30.         return null;
  31.     }
  32.     return (
  33.         <ul>
  34.             {suggesstions.map((item) => <li>{item}</li>)}
  35.         </ul>
  36.     );
  37. }
  38.  
  39. render(){
  40.         return (
  41.       <input onChange={this.onTextChange} type="text" />
  42.       {this.renderSuggestions()}
  43.     )
  44. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top