bangbib/src/components/Autocomplete.svelte

<script>
  import { view, schueler, db } from "./../stores.js";
  import { get_kurs, get_schueler } from './../getter.js';
  import Schueler from "./Schueler.svelte";
  import Kurs from "./Kurs.svelte";

  let input;
  let term = "";
  let res = [];
  let selected = -1;
  let items = [];
  let show;

  $: if (term.length > 1) {
    selected = -1;
    const schueler = $db
      .prepare(
        `SELECT *
        FROM schueler
        WHERE vorname || ' ' || name LIKE $term
        OR name || ', ' || vorname LIKE $term`
      )
      .all({term: "%"+ term + "%"});
    const kurse = $db
      .prepare(
        `SELECT DISTINCT k.kurs, s.klasse, s.jahr
        FROM kurszugehoerigkeit AS k
        JOIN schueler AS s ON (s.schild_id = k.schild_id)
        WHERE kurs LIKE $term OR klasse LIKE $term`
      )
      .all({term: term + "%"});
    const res_s = schueler.map(s => {
      return { id: s.id, name: `${s.name}, ${s.vorname}`, schueler: true };
    });
    const res_k = kurse.map(k => {
      return {
        id: k.kurs,
        name: `${k.kurs} – ${k.klasse}`,
        klasse: k.klasse,
        jahr: k.jahr
      };
    });
    res = res_k.concat(res_s);
  }
  $: if (term.length < 2) res = [];
  const key = e => {
    if (e.key === "ArrowDown") selected += 1;
    else if (e.key === "ArrowUp") selected -= 1;
    else if (e.key === "Enter" && selected >= 0) {
      show_selected(res[selected]);
      return;
    } else return;
    if (selected > res.length - 1) selected = 0;
    if (selected < 0) selected = res.length - 1;
    e.preventDefault();
    items[selected].scrollIntoView({ block: "center", inline: "nearest" });
  };
  const blur = _ => {
    setTimeout(_ => (show = false), 500);
  };

  function show_selected(item) {
    res = [];
    selected = -1;
    term = "";
    input.blur();
    // hole Schüler
    if (item.schueler) {
      get_schueler(item);
      $view = Schueler;
    }
    // hole Kurs
    else {
      get_kurs(item);
      $view = Kurs;
    }
  }
</script>

<style>
  .wrapper {
    position: relative;
  }
  .input {
    width: 20rem;
  }
  .items {
    position: absolute;
    border: 1px solid #d4d4d4;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 80vh;
    overflow: auto;
  }
  .items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
  }
  .items div:hover {
    background-color: #e9e9e9;
  }
  .active {
    background-color: DodgerBlue !important;
    color: #ffffff;
  }
</style>

<div class="wrapper">
  <input
    class="input"
    type="text"
    placeholder="suchen ..."
    bind:this={input}
    bind:value={term}
    on:keydown={key}
    on:blur={blur}
    on:focus={() => (show = true)} />
  {#if res.length && show}
    <div class="items">
      {#each res as r, i}
        <div
          on:click={() => show_selected(r)}
          class:active={selected === i}
          bind:this={items[i]}>
          {r.name}
        </div>
      {/each}
    </div>
  {/if}
</div>