Søk og spørringer i Firebase

I firebase kan du lage en spørring på denne måten:

let ref = firebase.database().ref("dyr").orderByChild("kundenr").equalTo(valgt);

Tilsvarende sql er

Select * from dyr where kundenr=valgt order by kundenr;

Denne teknikken kan du bruke til å lage en søkefunksjon som finner poster i en tabell med gitte kriterier.
I eksemplet under lager jeg et skjema/app med en søkefunksjon.

Søkefelt i skjema

Jeg legger inn følgende html:

<input type="text" placeholder="søk" id="find">

Denne kan legges inn der du synes det passer på skjemaet ditt (gjerne oppe til høyre på menylinja - klassisk plassering).
Bruk css og lag regler som styler utseendet.

Jeg trenger også en plass til å vise resultatet i (du kan bruke en div du har fra før):

<div id="resultat"></div>

Denne div#resultat bør styles med css slik at søkeresultatet ser bra ut.

Nå må vi legge inn js-kode som reagerer på at bruker skriver inn et ord og trykker enter. Denne koden må plasseres nederst på html-sida inne i en script tag,
eller i setup() funksjonen dersom denne er definert.

Jeg går ut ifra at du allerede har lagt inn kode som kobler opp til Firebase

  function setup() {

    var config = {
        apiKey: "AIzaSyBsSmSbBvjGwUKapak-USd6oUBnkoVE0ls",
        authDomain: "civz-7871d.firebaseapp.com",
        databaseURL: "https://civz-7871d.firebaseio.com",
        projectId: "civz-7871d",
        storageBucket: "civz-7871d.appspot.com",
        messagingSenderId: "324948067446"
    };

    firebase.initializeApp(config);

    let database = firebase.database();

    let inpFind = document.getElementById("find"); // kobling til søkefeltet
    inpFind.addEventListener("keydown", finnOrd);
    let divResultat = document.getElementById("resultat"); // kobling til div#resultat

    function finnOrd(e) {
        if (e.keyCode === 13) { // bruker trykket return
            let valgt = inpFind.value;
            let ref = firebase.database().ref("dyr").orderByChild("navn").equalTo(valgt);
            ref.once("value").then(function (snapshot) {
                let funnet = snapshot.val();
                if (funnet) {
                    // vi fant noe som matcher
                    let htm = Object.entries(funnet).map(([k,v]) => {
                      let felt = Object.entries(v).map(([k,v]) => 
                          `<li>${k} : ${v}</li>`
                      );
                      return `${k} <ul>${felt.join('')}</ul>`;
                    });
                    divResultat.innerHTML = htm;
                } else {
                    divResultat.innerHTML = "Ingen treff (sjekk stor/liten bokstav)";
                }
            });
        }
    }
}

Denne koden finner du i repository audunhauge.github.io under it1/Soek.