[Search] - Click or enter keypress events in order to trigger search requests?

[GeorgeKanan]

Hi,
When queries are applied to a database it's more efficient to submit Search requests on click or enter keypress events instead of keypress events.
Is it possible to do so?

In this case, I'm considering search suggestions as search results, so that a user would choose one out of them in order to be submitted later with form data.

[natzar]

Like an attribute called autosubmit=false ?

[GeorgeKanan]

@natzar Yes maybe, and a way to trigger search requests

[timhoffmannGIThub]

Hi, bit late to the party, but I thought I might contribute. I kind of stood at the same problem a few months ago. Here's how I've done it:

Let's create two variables via react. One which is basically our search-string and one which sets the former:
const [searchString, setSearchString] = useState("");

Then you'll need an constant, that listens to the enter-key. It'll look something like this:
const listenEnter = e => { if (e.keyCode === 13) { enter(); } };

You can give yourself a response however you seem fit, through console or other:
const enter= () => { console.log("success"); };
This will just give you feedback, you can take it out of course.

After that you will need to rewrite how it the search bar reacts to changes. This is where it'll autosubmit, which means you'll have to rewrite it so it just sets the value of the searchstring. It could look something like this:
const onSearchChange = (e, data) => { setSearchString(e.target.value); };

Now this is important, you'll have to add a onKeyDown attribute in the return, just under the search segement. Of course you'll need to conform it to the grid system and can change it how you'd like to have it displayed. For simplicitys sake let's just write it like this for now:
return ( <Search value={searchString} onSearchChange={onSearchChange} showNoResults={false} input="text" onKeyDown={listenEnter} /> );

And that should be it! I did simplify a lot of corners I guess, but I hope the core idea came out and will serve in later Versions of semanticUI as well.