diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
index e087b7a..8bd1773 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
@@ -1,12 +1,32 @@
+import { useState } from 'react';
 
+async function fetchData(query, preview) {
+    const response = await fetch(`https://localhost:7292/api/Search?query=${query}&preview=${preview}&deep=true`);
+    const json = await response.json();
+  //  if (json.length > 0)
+    //    setProducts([...json]);
+    
+}
+
+function useInput(defaultValue) {
+    const [value, setValue] = useState(defaultValue);
+    function onChange(e) {
+      setValue(e.target.value);
+      fetchData(value, true);
+    }
+    return {
+      value,
+      onChange,
+    };
+}
 
 const ResearchBar = () => {
-
+    const input = useInput();
     return (
         <div className="research-container">
-            <input className="research-input" placeholder="Rechercher..."></input>
+            <input className="research-input" placeholder="Rechercher..." {...input}></input>
             <button className="research-btn">
-                <div className="fa fa-search"/>
+                <div className="fa fa-search" onClick={fetchData(input.value, false)}/>
             </button>
         </div>
     );