Add SiteSearch Type-Ahead

.gitignore

@@ -116,3 +116,7 @@ dist
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+
+# IDEs
+.idea/

packages/libs/web-common/src/App/Header/HeaderNav.jsx

@@ -92,7 +92,7 @@ class HeaderNav extends React.Component {
                 maxWidth: '35em',
               }}
             >
-              <SiteSearchInput />
+              <SiteSearchInput siteSearchURL={siteSearchServiceUrl} />
             </div>
           )}
         </div>
@@ -212,7 +212,7 @@ class HeaderNav extends React.Component {
                 fontSize: '1.2em',
               }}
             >
-              <SiteSearchInput />
+              <SiteSearchInput siteSearchURL={siteSearchServiceUrl} />
             </div>
           )}
           <div style={{ display: 'flex' }}>

packages/libs/web-common/src/components/SiteSearch/SiteSearch.scss

@@ -72,7 +72,7 @@
       min-height: 4.25em;
       align-items: center;
       flex-wrap: wrap;
-      
+
       .PaginationMenu {
         margin: auto;
 
@@ -89,24 +89,79 @@
     align-items: flex-start;
     position: relative;
   }
-  
+
   &--SearchBox {
     display: flex;
     justify-content: space-between;
     border-radius: 1.5em;
-    overflow: hidden;
+    position: relative;
 
     &:focus-within {
       box-shadow: 0 0 3pt 2pt #0067f4;
     }
 
-    input {
-      border: none !important;
-      border-radius: 0;
-      padding: .4em .9em !important;
+    div.type-ahead {
       width: 100%;
-      &:focus {
-        outline: none;
+
+      div.type-ahead-input {
+        position: relative;
+
+        input {
+          border: none !important;
+          border-radius: 1.5em 0 0 1.5em;
+          padding: 0.4em 0.9em !important;
+          width: 100%;
+
+          &:focus {
+            outline: none;
+          }
+        }
+
+        input:first-child {
+          position: relative;
+          background: #00000000 !important;
+          z-index: 1;
+        }
+
+        input:nth-child(2) {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 0;
+          color: gray;
+        }
+      }
+
+      ul.type-ahead-hints {
+        margin: 0.2em 0 0 0;
+        padding: 0;
+        list-style: none;
+        position: absolute;
+        background: #ededed;
+        overflow: hidden;
+        width: 100%;
+        border-radius: 1em;
+        box-shadow: 0 0 1em rgba(0, 48, 76, 0.5);
+
+        li.type-ahead-hint {
+          padding: 0.2em 0 0.2em 1em;
+          text-align: left;
+
+          &:focus,
+          &:active,
+          &:hover {
+            background: #DEDEDE;
+          }
+
+          &:first-child {
+            padding-top: 0.4em;
+          }
+
+          &:last-child {
+            padding-bottom: 0.4em;
+          }
+        }
+
       }
     }
 
@@ -121,6 +176,10 @@
       padding-left: .9em;
       padding-right: 1em;
 
+      &:last-child {
+        border-radius: 0 1.5em 1.5em 0;
+      }
+
       &:not(:last-of-type) {
         border-right: 1px solid #00000042;
       }
@@ -150,7 +209,6 @@
     }
   }
 
-
   &--CountsContainer {
     grid-area: counts;
     justify-self: end;
@@ -431,7 +489,6 @@
         background: #1345bd;
         color: white;
       }
-
     }
     &Text {
       margin: .25em 1.5em;
@@ -488,4 +545,3 @@
   }
 
 }
-

packages/libs/web-common/src/components/SiteSearch/SiteSearchInput.tsx

@@ -7,19 +7,24 @@ import { makeClassNameHelper, wrappable } from '@veupathdb/wdk-client/lib/Utils/
 import { SITE_SEARCH_ROUTE, SEARCH_TERM_PARAM, DOCUMENT_TYPE_PARAM, ORGANISM_PARAM, FILTERS_PARAM } from './SiteSearchConstants';
 
 import './SiteSearch.scss';
+import { TypeAheadInput } from './TypeAheadInput';
 
 const cx = makeClassNameHelper("SiteSearch");
 
 const preventEventWith = (callback: () => void) => (event: React.FormEvent) => {
   event.preventDefault();
   callback();
-}
+};
 
 export interface Props {
   placeholderText?: string;
+  siteSearchURL: string;
 }
 
-export const SiteSearchInput = wrappable(function ({ placeholderText }: Props) {
+export const SiteSearchInput = wrappable(function ({
+  placeholderText,
+  siteSearchURL,
+}: Props) {
   const location = useLocation();
   const history = useHistory();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -47,7 +52,7 @@ export const SiteSearchInput = wrappable(function ({ placeholderText }: Props) {
     const queryString = `q=${encodeURIComponent(inputRef.current?.value || '')}`;
     onSearch(queryString);
   }, [ onSearch ]);
-  
+
   const [ lastSearchQueryString, setLastSearchQueryString] = useSessionBackedState<string>(
     '',
     'ebrc/site-search/last-query-string',
@@ -62,7 +67,7 @@ export const SiteSearchInput = wrappable(function ({ placeholderText }: Props) {
   }, [ location ]);
 
   return (
-    <form ref={formRef} action={SITE_SEARCH_ROUTE} onSubmit={preventEventWith(handleSubmitWithFilters)} className={cx("--SearchBox")}>
+    <form ref={formRef} action={SITE_SEARCH_ROUTE} onSubmit={preventEventWith(handleSubmitWithFilters)} className={cx("--SearchBox")} autoComplete="off">
       {docType && <input type="hidden" name={DOCUMENT_TYPE_PARAM} value={docType}/>}
       {organisms.map(organism => <input key={organism} type="hidden" name={ORGANISM_PARAM} value={organism}/>)}
       {fields.map(field => <input key={field} type="hidden" name={FILTERS_PARAM} value={field}/>)}
@@ -71,15 +76,7 @@ export const SiteSearchInput = wrappable(function ({ placeholderText }: Props) {
           <button className="reset" type="button" onClick={handleSubmitWithoutFilters}>Clear filters</button>
         </Tooltip>
       ) : null}
-      <input
-        ref={inputRef}
-        type="input"
-        onFocus={e => e.target.select()}
-        name={SEARCH_TERM_PARAM}
-        key={searchString}
-        defaultValue={searchString}
-        placeholder={placeholderText}
-      />
+      <TypeAheadInput siteSearchURL={siteSearchURL} inputReference={inputRef} searchString={searchString} />
       {location.pathname !== SITE_SEARCH_ROUTE && lastSearchQueryString && (
         <Tooltip content="Go back to your last search result">
           <button className="back" type="button" onClick={() => onSearch(lastSearchQueryString)}>