Skip to content

Instantly share code, notes, and snippets.

@burningTyger

burningTyger/App.svelte

Last active February 20, 2019 23:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save burningTyger/07ff8b15b72ae609c723d529c29180d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save burningTyger/07ff8b15b72ae609c723d529c29180d5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. burningTyger revised this gist Feb 20, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Created with [svelte.technology/repl](https://svelte.technology/repl)
    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.
  2. burningTyger revised this gist Feb 20, 2019. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions App.svelte
    View file
    Original file line number Diff line number Diff line change
    @@ -27,8 +27,8 @@
    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 = [])
    .then(async res => {options = await res.json(); pos = 1})
    .catch(e => options = [])
    : options = []
    }
    const keydown = (e) => {
    @@ -72,9 +72,7 @@
    padding: 0;
    margin: 0;
    border: 1px solid #dbdbdb;
    /* height: 6rem; */
    overflow: auto;
    /* width: 100%; */
    background-color: white;
    box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.1);
    position: absolute;
  3. burningTyger revised this gist Feb 20, 2019. 1 changed file with 6 additions and 3 deletions.
    9 changes: 6 additions & 3 deletions App.svelte
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <h1>{selected.link || 'No selection'}</h1>
    <div class="search">
    <input bind:value={term} on:keydown={keydown} class="input">
    <input bind:value={term} on:keydown={keydown} class="input" on:blur={() => options = []}>
    <ul class="list">
    {#each options as t,i}
    <li
    @@ -27,8 +27,7 @@
    function fetch_options (term) {
    term.length > 0
    ? fetch(`https://farhang.im/search/autocomplete.json?term=${term}`)
    .then(res => res.text())
    .then(text => {options = JSON.parse(text); pos = 1})
    .then(async res => {options = await res.json(); pos = 1})
    .catch(e => options = [])
    : options = []
    }
    @@ -50,6 +49,10 @@
    e.preventDefault();
    options.length > 0 && (term = options[pos-1].value)
    break;
    case 'Escape':
    e.preventDefault();
    options = []
    break
    }
    }
    </script>
  4. burningTyger created this gist Feb 20, 2019.
    93 changes: 93 additions & 0 deletions App.svelte
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    <h1>{selected.link || 'No selection'}</h1>
    <div class="search">
    <input bind:value={term} on:keydown={keydown} class="input">
    <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(res => res.text())
    .then(text => {options = JSON.parse(text); 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;
    }
    }
    </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;
    /* height: 6rem; */
    overflow: auto;
    /* width: 100%; */
    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>
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Created with [svelte.technology/repl](https://svelte.technology/repl)
    3 changes: 3 additions & 0 deletions data.json5
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    {

    }
    3 changes: 3 additions & 0 deletions meta.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    {
    "svelte": true
    }