burningTyger · February 20, 2019 23:13
diff --git a/README.md b/README.md
diff --git a/App.svelte b/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>
diff --git a/data.json5 b/data.json5
 {
 	
 }
diff --git a/meta.json b/meta.json
 {
  "svelte": true
 }
	<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>
No results found