Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 2x | import { useState } from "react";
const HeaderSearchBar = () => {
const [inputValue, setInputValue] = useState("");
const onChangeHandler = (event) => {
setInputValue(event.target.value);
};
function validateNpi(val) {
const pattern = /^\d{10}$/;
return val && val.length === 10 && pattern.test(val);
}
// If inputValue is a valid NPI, then navigate to NPI Lookup page
if (validateNpi(inputValue)) {
window.location.replace(`/participation-lookup?npi=${inputValue}`);
}
return (
<div className="qpp-c-search--header-container">
<div className="qpp-c-search--header-container__block">
<div className="qpp-c-search--header-container__title">
Search (beta)
</div>
<form
id="search_form"
acceptCharset="UTF-8"
action="https://search.usa.gov/search"
aria-labelledby="site-search-label"
role="search"
method="get"
className="qpp-c-search qpp-c-search--global qpp-u-width--100"
>
<div
style={{
margin: "0px",
padding: "0px",
display: "inline",
}}
>
<input name="utf8" type="hidden" value="✓" />
</div>
<input
id="affiliate"
name="affiliate"
type="hidden"
value="qpp_search-gov-index"
/>
<label
id="site-search-label"
className="qpp-u-visually-hidden"
htmlFor="query"
>
Site Search
</label>
<div className="qpp-u-width--100 qpp-u-display--flex">
<div className="qpp-c-search__wrap">
<input
autoComplete="off"
className="qpp-c-text-input"
id="query"
name="query"
type="text"
maxLength="50"
onChange={onChangeHandler}
value={inputValue}
/>
</div>
<button
name="commit"
id="global-search"
type="submit"
className="qpp-c-search__submit qpp-c-button qpp-c-button--secondary"
>
<span className="qpp-u-visually-hidden">Search</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
className="qpp-icon-mat qpp-icon-inline--lg"
aria-hidden="true"
focusable="false"
>
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
</button>
</div>
</form>
</div>
<div>
<a
className="survey-link"
href="https://qppexperience.gov1.qualtrics.com/jfe/form/SV_bqQlaD7c53dD6ES"
rel="noreferrer"
target="_blank"
>
Give feedback about the Search experience
</a>
</div>
</div>
);
};
export default HeaderSearchBar;
|