# Can we create multiple searchbox with search and clear button for each of them. is this something can be implemented with react out of box library? **URL:** \ **Category:** Elastic Search\ **Tags:** elastic-app-search\ **Created:** [January 10, 2022, 9:39pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949 "2022-01-10T21:39:38Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 10, 2022, 9:39pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/1 "2022-01-10T21:39:38Z")
we have currently one searchbox with search and clear button on it. But now we want to add another text box with similar functionality but with exact search on this one. is this something can be implemented ? if i use "disease" with quotes, sometime it works as exact search but what is the preferred way of implementing ---
**Author:** ![warkolm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/warkolm/32/39224_2.png) [@warkolm](https://discuss.elastic.co/u/warkolm)\ **Post date:** [January 10, 2022, 11:39pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/2 "2022-01-10T23:39:18Z")
Do you want to do this in App Search? ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 11, 2022, 1:18am UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/3 "2022-01-11T01:18:31Z")
Yes we are using App Search. we are using React search UI ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 11, 2022, 8:30pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/4 "2022-01-11T20:30:46Z")
Can anybody help me on this ?. I was thinking if we have multiple seachbox , how can we 2 search term to call elastic api o n search ? ---
**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\ **Post date:** [January 12, 2022, 1:14pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/5 "2022-01-12T13:14:56Z")
Hey @pradeepjanga, I recommend using a single search box and adding an "Exact match" checkbox to toggle whether or not an exact match query is going to be performed. When the option is enabled, you can automatically wrap the users input in quotes. ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 12, 2022, 2:33pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/6 "2022-01-12T14:33:17Z")
with quotes, i will get the subset of the match right ? i want to search only exact math. ex: if i search with A124. we get want only one record even if there are 2 records like A124, A124a. Also on that checkbox click, how to tell to search only on specific facet ? ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 12, 2022, 2:43pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/7 "2022-01-12T14:43:32Z")
Also how to intercept the request on onSearch to add the quotes ? ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 12, 2022, 3:27pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/8 "2022-01-12T15:27:40Z")
Also if we really want to use the 2 search box independent, can we achieve using the react search UI library ? ---
**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\ **Post date:** [January 12, 2022, 6:53pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/9 "2022-01-12T18:53:17Z")
> with quotes, i will get the subset of the match right ? > i want to search only exact math. > ex: if i search with A124. we get want only one record even if there are 2 records like A124, A124a. I don't know. Can you just use the first result in this case? Instead of using a search query, you could make it a filter on that field instead, that will give you only the exact value. > Also how to intercept the request on onSearch to add the quotes ? You could use the `onSearch` handler on the connector for that: [https://github.com/elastic/search-ui/blob/master/ADVANCED.md#connectors-and-handlers](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#connectors-and-handlers) > Also if we really want to use the 2 search box independent, can we achieve using the react search UI library? I _think_ you should be able to using one of the solutions we've chatted about here. ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 12, 2022, 7:10pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/10 "2022-01-12T19:10:51Z")
Thanks for your response. Is there a way to add custom property to the request state and use that on the onSearch connector? ` onSearch: async (requestState, queryConfig, next) => {` ---
**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\ **Post date:** [January 12, 2022, 8:02pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/11 "2022-01-12T20:02:52Z")
Hey @pradeepjanga Another option would be to create an input box component which uses the setFilter method. See link below where I have a working example. In this example im using the "states" field and setting the value in the input box to the filter when the customer clicks search. An example of this working is searching for "Alaska". It will not match on partial text (also one thing to note that its case sensitive too). Hope this helps! > **[search-ui-national-parks-example (forked) - CodeSandbox](https://codesandbox.io/s/search-ui-national-parks-example-forked-dsnxw?file=%2Fsrc%2FExactMatchInput.js)** > > search-ui-national-parks-example (forked) by joemcelroy using @elastic/react-search-ui, @elastic/react-search-ui-views, @elastic/search-ui, @elastic/search-ui-app-search-connector, moment, react, react-dom, react-scripts Joe ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 12, 2022, 8:52pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/12 "2022-01-12T20:52:54Z")
Thanks for that. is the setFilter action only look for exact match ? ---
**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\ **Post date:** [January 18, 2022, 12:37pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/13 "2022-01-18T12:37:28Z")
hey Pradeepjanga - yes exact match. Sorry for not replying earlier, I missed your reply! ---
**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\ **Post date:** [January 20, 2022, 7:13pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/14 "2022-01-20T19:13:34Z")
Thank you Joe. you working example helped me alot. Thanks again ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [February 17, 2022, 7:13pm UTC](https://discuss.elastic.co/t/can-we-create-multiple-searchbox-with-search-and-clear-button-for-each-of-them-is-this-something-can-be-implemented-with-react-out-of-box-library/293949/15 "2022-02-17T19:13:38Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.