search pour formation etape 1/3

components/search.riot

@@ -1,6 +1,6 @@
 <search>
     <label>
-	    <input oninput={searchF} type="input" placeholder= {state.formation}>
+	    <input onkeydown={searchF} type="input" placeholder= {state.formation}>
 		<div id="list-formations">
             <ul>
 	            <li each={item in this.state.items}>
@@ -25,21 +25,26 @@
                 // initial state
                     this.state = {
                         formation: props.formation,
-                        items: null
+                        items: null,
+                        allitems: null
                     }
                     formation().then((response) => {
 			            this.update({
-                            items: response
+                            items: response,
+                            allitems: response
 					    })
 		            })
-                    console.log(this.state.items)
                 },
-                searchF(){
-                    formation().then((response) => {
-			            this.update({
-                            items: response
-					    })
-		            })
+                searchF(e){
+                    let responseFiltered=[]
+			        this.state.allitems.forEach(formation => {
+                        if (formation.name.includes(e.target.value)) {
+                            responseFiltered.push(formation)
+                        }
+                    });
+                    this.update({
+                        items: responseFiltered
+				    })
                     console.log(this.state.items)
                 }
             }

components/testformation.riot

@@ -1,52 +0,0 @@
-<formation>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
-<table class="table is-fullwidth is-hoverable">
-                <tbody1>
-                    <tr >
-                        <th></th>
-                        <th></th>
-                    </tr>
-                </tbody1>
-</table>
-
-<script>
-async function formation (){
-
-
-
-    let result = await fetch("https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin")
-    let resultats = await result.json()
-    console.log(result)
-    console.log(resultats)
-    let base=[]
-    let filieretable=[]
-    let filieredetail=[] 
-
-    let table = resultats["facet_groups"][0]["facets"]
-    console.log(table)
-    
-    const tableBody = document.querySelector("tbody1")
-    for(tes of table){
-        const tableRow = document.createElement("tr")
-
-        const formationCell = document.createElement("td")
-        let texteformation = document.createTextNode(tes.name)
-        formationCell.appendChild(texteformation)
-        tableRow.appendChild(formationCell)
-
-        const nombredeplaceCell = document.createElement("td")
-        const nombredeplace = document.createTextNode(tes.count)
-        nombredeplaceCell.appendChild(nombredeplace)
-        tableRow.appendChild(nombredeplaceCell)
-        
-        tableBody.appendChild(tableRow)        
-    }
-}
-    export default{
-            onMounted(){
-                formation()
-            }
-    }
-
-</script>
-</formation>

index.html

@@ -18,8 +18,7 @@
 			riot.compile().then(() => {
 				riot.mount('search', {
 					formation:'Formation',
-					items: null,
-					text: null
+					items: null
 				})
 			})
 		</script>