web: add support for realtime search (#2171)

Signed-off-by: Abdulrehman-Jafer <abdulrehmanjaferwork01233@gmail.com>
This commit is contained in:
Abdulrehman-Jafer
2023-03-23 12:45:33 +05:00
committed by GitHub
parent 969611c9e6
commit e12372364d

View File

@@ -20,8 +20,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import * as Icon from "../icons";
import "./search.css";
import Field from "../field";
function SearchBox(props) {
import { debounce } from "../../utils/debounce";
function SearchBox({ onSearch }) {
return (
<Field
data-test-id="search-input"
@@ -29,18 +29,16 @@ function SearchBox(props) {
id="search"
name="search"
type="text"
sx={{m: 0,mx: 1,mt: 1}}
sx={{ m: 0, mx: 1, mt: 1 }}
placeholder="Type your query here"
onKeyDown={(e) => {
if (e.key === "Enter") props.onSearch(e.target.value);
}}
onChange={debounce((e) => onSearch(e.target.value), 250)}
action={{
icon: Icon.Search,
testId: "search-button",
onClick: () => {
const searchField = document.getElementById("search");
if (searchField && searchField.value && searchField.value.length) {
props.onSearch(searchField.value);
onSearch(searchField.value);
}
}
}}