How to compare a string in Reactjs to a list of strings and display the result

Question

I have an input field in one of my React Component which will take the inputs which will be email id's of users. I have a list of email id's saved in the server.So,when I type something in the input field, I want to have the suggestion of the email id's to appear below the input field from the currently existing list.So, what I have come up with is that I should use the localeCompare(string) function from javascript where I will have to use some condition like :

input_string.localeCompare(existing_string)

So,is this the correct way or is there some other way to proceed? And do I have to create a new component for displaying the suggestion below the input?

NOTE: I want my search to work in a similar manner like how google search works when we type some input in the search bar, the suggestion similar to the search string appears below.

There are search suggestion npm packages out there that will do things like this for you — Andrew
– Andrew, Commented Apr 24, 2018 at 4:53
@Andrew I was trying to figure out if there is a way where i can create a component on my own that will do the same filtering work so that I can use it for that purpose. — pranami
– pranami, Commented Apr 24, 2018 at 5:13
I suppose if it's for self enrichment, by all means. But usually you don't need to reinvent the wheel — Andrew
– Andrew, Commented Apr 24, 2018 at 5:19
@Andrew yes,you are correct.It's for self enrichment and learning. And I will definitely try out the packages that are already present. Thanks for suggesting :) — pranami
– pranami, Commented Apr 24, 2018 at 5:26

Bhojendra Rauniyar · Accepted Answer · 2018-04-24 05:02:58Z

1

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

You may use filter, and then you may use Regular Expression. Here's an example using includes method:

render() {
  const emailList = [
    '[email protected]',
    '[email protected]',
    '[email protected]',
    '[email protected]',
    '[email protected]'
  ];
  const lookupList = emailList.filter(email => email.includes(inputRefValue));
  return <div>{ lookupList.map(el => el) }</div>
}

edited Apr 24, 2018 at 5:02

answered Apr 24, 2018 at 4:51

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pranami Over a year ago

Thanks for the answer.Just let me try it out.I will let you know if it works as expected. :)

Bhojendra Rauniyar Over a year ago

Glad to help you.

Tolsee · Accepted Answer · 2018-04-24 05:04:11Z

1

Comparison on the client side is not a good solution. Suppose, you might have hundreds of thousands of emails on your server, there is no way you can load all the data. The way it's done is you call(GET request to the server) the server in every new keystroke from the client.

I have tried to show the process in the block diagram as below If that makes sense.

You can look at this tutorial.

answered Apr 24, 2018 at 5:04

Tolsee

1,71516 silver badges23 bronze badges

1 Comment

pranami Over a year ago

Thanks for the answer.I will definitely try it out the way you suggested. For now, I was trying to get the result for a small list of emails.Once I try to work for a bigger set of data,I will try to follow your approach.Thanks for your help. :)

Collectives™ on Stack Overflow

How to compare a string in Reactjs to a list of strings and display the result

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related