ProjetRIOT/components/search.riot

<search>
    <label>
	    <input onkeydown={searchF} type="input" placeholder= {state.formation}>
		<div id="list-formations">
            <ul>
	            <li each={item in this.state.items}>
		           <span onclick={()=>filter(item.name)}>{item.name}</span>
                   <span>{item.count}</span>
	            </li>
            </ul>
		</div>
    </label>
    <script>

        async function formation(whatToSearch){
            let result = await fetch("https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet="+whatToSearch+"&timezone=Europe%2FBerlin")
            let resultats = await result.json()
            let table = resultats["facet_groups"][0]["facets"]
            return table
        }

        export default function search(){
            return {
                onBeforeMount(props, state) {
                // initial state
                    this.state = {
                        formation: props.formation,
                        items: null,
                        allitems: null,
                        whatToSearch: "fili"
                    }
                    formation(this.state.whatToSearch).then((response) => {
			            this.update({
                            items: response,
                            allitems: response
					    })
		            })
                },
                searchF(e){
                    let responseFiltered=[]
			        this.state.allitems.forEach(formation => {
                        if (formation.name.toUpperCase().includes(e.target.value.toUpperCase())) {
                            responseFiltered.push(formation)
                        }
                    });
                    this.update({
                        items: responseFiltered
				    })
                },
                filter(fili){
                    console.log("filter! "+fili)
                    if (this.state.whatToSearch==="form_lib_voe_acc"){
                        this.update({
                                formation: "Filière de formation détaillée",
                                whatToSearch: "lib_for_voe_ins"
                            })
                    } else {
                        this.update({
                                formation: "Filière de formation",
                                whatToSearch: "form_lib_voe_acc"
                            })
                    }
                    formation(this.state.whatToSearch).then((response) => {
                        this.update({
                            allitems: response,
                            item: response
                        })
                        console.log(this.state.items)
                    })
                    let responseFiltered=[]
			        this.state.allitems.forEach(formation => {
                        if (formation.name.includes(fili)) {
                            responseFiltered.push(formation)
                        }
                    });
                    this.update({
                        allitems: responseFiltered,
                        items: responseFiltered
				    })
                }
            }
        }

        
    </script>
</search>