add keyboard search feature

src/components/AdvancedSearch.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react'
+import React, { forwardRef, useEffect, useState,useRef } from 'react'
 import { Container, Dropdown } from 'semantic-ui-react'
 import '../css/mainpagecss.css'
 
@@ -10,10 +10,13 @@ import AutoComplete from '../utils/AutoComplete'
 
 const { useImperativeHandle } = React;
 
-
 const AdvancedSearch = forwardRef((props, ref) => {
   const { buildSearchList } = props
   let inputElement;
+
+  const _searchBox=useRef(null)
+  const _inputHandle=useRef(null)
+
   const searchFilterOptions = [
     {
       key: 0,
@@ -42,14 +45,15 @@ const AdvancedSearch = forwardRef((props, ref) => {
   const [autoComplete, setAutoComplete] = useState(null)
   const [suggestions, setSuggestions] = useState([])
   const [isInputInFocus, setIsInputInFocus] = useState(false)
+  const [new_array,setNew_array]=useState([])
+  let [counter,setCounter]=useState(0)
 
   useImperativeHandle(ref, () => ({
     resetSearchState () {
       setSearch('');
       setFilter(0);
       setAutoComplete(null);
       setSuggestions([]);
-      setIsInputInFocus(false);
     }
   }));
 
@@ -60,10 +64,10 @@ const AdvancedSearch = forwardRef((props, ref) => {
   const handleSearch = e => {
     e && e.preventDefault()
     document.activeElement.blur()
-    buildSearchList(search, filter)
+    buildSearchList(_inputHandle.current.value, filter)
   }
-
   const focusHandler = e => {
+    setCounter(0)
     // setSuggestions(autoComplete.suggest(search))
     setTimeout(() => {
       setIsInputInFocus(document.activeElement === inputElement)
@@ -117,12 +121,53 @@ const AdvancedSearch = forwardRef((props, ref) => {
     autoComplete && setSuggestions(autoComplete.suggest(search))
   }, [search])
 
+const func=(e)=>{
+  if(e.code=='Enter'){
+    setSearch(new_array[counter]||_inputHandle.current.value)
+  }
+      if(new_array.length==0 && counter==0){
+      setCounter(0)
+    }else{
+      if(e.code=='ArrowDown'){
+        if(counter>new_array.length-1){
+          setCounter(counter--)
+        }else{
+          if(new_array[counter]==_inputHandle.current.value){
+          _inputHandle.current.value=new_array[counter+1]!=undefined?new_array[counter+1]:new_array[counter]
+          }else{
+            _inputHandle.current.value=new_array[counter]
+          }
+          setCounter(counter++)
+        }
+      }
+      if(e.code=='ArrowUp'){
+        counter==0?setCounter(0):setCounter(counter--)
+        if(new_array[counter]==_inputHandle.current.value){
+          _inputHandle.current.value=new_array[counter-1]!=undefined?new_array[counter-1]:new_array[counter]
+        }else{
+          _inputHandle.current.value=new_array[counter]
+        }
+      }
+  }
+}
+
+useEffect(()=>{
+_searchBox.current.addEventListener('keydown',func)
+return ()=>{
+  _searchBox.current.removeEventListener('keydown',func)
+}
+},[new_array])
+
+useEffect(()=>{
+  setCounter(0)
+  setNew_array(suggestions.map(el=>el))
+},[suggestions])
+
   return (
     <Container textAlign='center'>
       <form className="search-form" autocomplete="off">
-        <div id='searchBox'>
-          <input
-            value={search}
+        <div ref={_searchBox} id='searchBox'>
+          <input ref={_inputHandle} 
             onChange={e => {
               if (e.keyCode === 13) {
                 handleSearch()
@@ -143,7 +188,11 @@ const AdvancedSearch = forwardRef((props, ref) => {
                   key={content}
                   onClick={() => {
                     setSearch(content)
-                    buildSearchList(content, filter)
+                    /**buildSearchList is not needed because it is handled in handleSearch(),
+                     * buildSearchList should be called clickable route functionality needed, 
+                     * since search by keyboard is enabled buildSearchList need not be called
+                     */
+                    // buildSearchList(content, filter)
                   }}>{content}</p>
               ))}
             </div>)