autocomplete

README.md

This is an example svelte autocomplete component. There is not much to do with it unless you want to query the farhang database. But feel free to copy and paste things into your projects. This repo is public domain.

App.svelte

<h1>{selected.link || 'No selection'}</h1>
<div class="search">
  <input bind:value={term} on:keydown={keydown} class="input" on:blur={() => options = []}>
    <ul class="list">
        {#each options as t,i}
          <li
            class={`item ${i+1 === pos ? 'active':''}`}
            value={t.link}
            on:click={() => select(t)}
          >{t.value}</li>
        {/each}
    </ul>
  </div>

<script>
  let term = 'a'
  let options = []
  let pos
  let selected = {}
  $: fetch_options(term)

  function select (t) {
    selected = t
    term = ''
    pos = 1
  }
  function fetch_options (term) {
    term.length > 0
      ? fetch(`https://farhang.im/search/autocomplete.json?term=${term}`)
 					.then(async res => {options = await res.json(); pos = 1})
          .catch(e => options = [])
      : options = []
  }
  const keydown = (e) => {
    switch (e.key) {
          case 'ArrowDown':
            e.preventDefault();
            options.length > pos && (pos += 1)
            break;
          case 'ArrowUp':
            e.preventDefault();
            pos > 1 && (pos -=1)
            break;
          case 'Enter':
            e.preventDefault();
            select(options[pos-1])
            break;
          case 'Tab':
            e.preventDefault();
            options.length > 0 && (term = options[pos-1].value)
            break;
					case 'Escape':
						e.preventDefault();
						options = []
						break
        }
  }
</script>
<style>
    * {
    box-sizing: border-box;
  }
  .input {
    height: 2rem;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
  }
.search {
  position: relative;
}
.list {
    padding: 0;
    margin: 0;
    border: 1px solid #dbdbdb;
    overflow: auto;
    background-color: white;
    box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 100;
}
.item {
  /* color: #7a7a7a; */
    list-style: none;
    text-align: left;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.item.active,
.item:hover {
    background-color: #dbdbdb;
  }
</style>

data.json5

{
	
}

meta.json

{
  "svelte": true
}