├── .gitignore ├── src ├── index.js ├── main.js ├── App.svelte └── AutocompleteSelect.svelte ├── public └── index.html ├── .github └── workflows │ └── publish.yml ├── LICENSE ├── package.json ├── README.md └── rollup.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | /dist 4 | .DS_Store -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as default } from './AutocompleteSelect.svelte'; -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | svelte-autocomplete-select 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: 4 | - master 5 | 6 | name: Build and Publish 7 | jobs: 8 | build: 9 | name: Build 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@master 13 | - name: Install 14 | run: npm install 15 | - name: Lint 16 | run: npm run lint 17 | - name: Publish 18 | if: github.ref == 'refs/heads/master' 19 | uses: mikeal/merge-release@master 20 | env: 21 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 22 | NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Tiaan du Plessis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-autocomplete-select", 3 | "description": "Flexible, zero-dependency Autocomplete component for Svelte", 4 | "version": "0.0.0-dev", 5 | "svelte": "src/index.js", 6 | "module": "dist/index.mjs", 7 | "main": "dist/index.js", 8 | "license": "MIT", 9 | "files": [ 10 | "src", 11 | "dist" 12 | ], 13 | "scripts": { 14 | "build": "rollup -c", 15 | "prepare": "npm run build", 16 | "dev": "rollup -c -w", 17 | "lint": "echo TODO", 18 | "start": "sirv public" 19 | }, 20 | "keywords": [ 21 | "svelte", 22 | "svelte-autocomplete", 23 | "svelte-combobox", 24 | "svelte-select", 25 | "sapper", 26 | "sapper-autocomplete", 27 | "sapper-combobox", 28 | "sapper-select" 29 | ], 30 | "devDependencies": { 31 | "@rollup/plugin-commonjs": "^17.0.0", 32 | "@rollup/plugin-node-resolve": "^11.0.0", 33 | "rollup": "^2.3.4", 34 | "rollup-plugin-css-only": "^3.1.0", 35 | "rollup-plugin-livereload": "^2.0.0", 36 | "rollup-plugin-svelte": "^7.0.0", 37 | "rollup-plugin-terser": "^7.0.0", 38 | "sirv-cli": "^1.0.11", 39 | "svelte": "^3.32.1" 40 | }, 41 | "peerDependencies": { 42 | "svelte": "3" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # svelte-autocomplete-select 3 | [![package version](https://img.shields.io/npm/v/svelte-autocomplete-select.svg?style=flat-square)](https://npmjs.org/package/svelte-autocomplete-select) 4 | [![package downloads](https://img.shields.io/npm/dm/svelte-autocomplete-select.svg?style=flat-square)](https://npmjs.org/package/svelte-autocomplete-select) 5 | [![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme) 6 | [![package license](https://img.shields.io/npm/l/svelte-autocomplete-select.svg?style=flat-square)](https://npmjs.org/package/svelte-autocomplete-select) 7 | [![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) 8 | 9 | > Flexible, zero-dependency Autocomplete component for Svelte 10 | 11 | ## Table of Contents 12 | 13 | - [Demo](#demo) 14 | - [Usage](#usage) 15 | - [Install](#install) 16 | - [Credits](#credits) 17 | - [Contribute](#contribute) 18 | - [License](#License) 19 | 20 | ## Demo 21 | 22 | [Check it out](https://svelte-autocomplete-select.netlify.app/) 23 | 24 | ## Usage 25 | 26 | ```svelte 27 | 30 | 31 | 36 | ``` 37 | 38 | ## Install 39 | 40 | This project uses [node](https://nodejs.org) and [npm](https://www.npmjs.com). 41 | 42 | ```sh 43 | $ npm install svelte-autocomplete-select 44 | $ # OR 45 | $ yarn add svelte-autocomplete-select 46 | ``` 47 | 48 | ## Credits 49 | 50 | This package is based on [simply-svelte-autocomplete](https://github.com/themarquisdesheric/simply-svelte-autocomplete) 51 | 52 | ## Contribute 53 | 54 | 1. Fork it and create your feature branch: `git checkout -b my-new-feature` 55 | 2. Commit your changes: `git commit -am "Add some feature"` 56 | 3. Push to the branch: `git push origin my-new-feature` 57 | 4. Submit a pull request 58 | 59 | ## License 60 | 61 | MIT 62 | 63 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import css from 'rollup-plugin-css-only'; 7 | import pkg from './package.json'; 8 | 9 | const production = !process.env.ROLLUP_WATCH; 10 | 11 | const name = pkg.name 12 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') 13 | .replace(/^\w/, m => m.toUpperCase()) 14 | .replace(/-\w/g, m => m[1].toUpperCase()); 15 | 16 | function serve() { 17 | let server; 18 | 19 | function toExit() { 20 | if (server) server.kill(0); 21 | } 22 | 23 | return { 24 | writeBundle() { 25 | if (server) return; 26 | server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 27 | stdio: ['ignore', 'inherit', 'inherit'], 28 | shell: true 29 | }); 30 | 31 | process.on('SIGTERM', toExit); 32 | process.on('exit', toExit); 33 | } 34 | }; 35 | } 36 | 37 | const demoConfig = { 38 | input: 'src/main.js', 39 | output: { 40 | sourcemap: true, 41 | format: 'iife', 42 | name: 'app', 43 | file: 'public/build/bundle.js' 44 | }, 45 | plugins: [ 46 | svelte({ 47 | compilerOptions: { 48 | // enable run-time checks when not in production 49 | dev: !production 50 | } 51 | }), 52 | // we'll extract any component CSS out into 53 | // a separate file - better for performance 54 | css({ output: 'bundle.css' }), 55 | 56 | // If you have external dependencies installed from 57 | // npm, you'll most likely need these plugins. In 58 | // some cases you'll need additional configuration - 59 | // consult the documentation for details: 60 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 61 | resolve({ 62 | browser: true, 63 | dedupe: ['svelte'] 64 | }), 65 | commonjs(), 66 | 67 | // In dev mode, call `npm run start` once 68 | // the bundle has been generated 69 | !production && serve(), 70 | 71 | // Watch the `public` directory and refresh the 72 | // browser on changes when not in production 73 | !production && livereload('public'), 74 | 75 | // If we're building for production (npm run build 76 | // instead of npm run dev), minify 77 | production && terser() 78 | ], 79 | watch: { 80 | clearScreen: false 81 | } 82 | }; 83 | 84 | const pkgConfig = { 85 | input: 'src/index.js', 86 | output: [ 87 | { file: pkg.module, 'format': 'es' }, 88 | { file: pkg.main, 'format': 'umd', name } 89 | ], 90 | plugins: [ 91 | svelte({ 92 | emitCss: false 93 | }), 94 | resolve() 95 | ] 96 | } 97 | 98 | export default [ 99 | pkgConfig, 100 | demoConfig 101 | ] -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 66 | 67 |

68 |

svelte-autocomplete-select

69 | 70 |

Flexible, zero-dependency Autocomplete component for Svelte.

71 | 72 |

Basic

73 | 74 | 78 | 79 | 80 |

With Icon

81 | 82 | 87 | {isExpanded ? '☝️' : '👇'} 88 | 89 | 90 |

With forced select

91 | 92 | 97 | 98 |

With array of objects as options

99 | 100 | obj.label} 103 | onSubmit={handleSubmit} 104 | placeholder="With array of objects as options" /> 105 | 106 |

With custom options

107 | 108 | 114 |

handleSubmit(match)}> 115 | 😀 116 | {match} 117 |

118 | 119 | 120 |

With async options

121 | 122 | results} 125 | onInput={value => getAsyncOptions(value)} 126 | onSubmit={handleSubmit} 127 | placeholder="With async options"> 128 | {isLoading ? '🤔' : '👇'} 129 | 130 | 131 | 139 |

140 | -------------------------------------------------------------------------------- /src/AutocompleteSelect.svelte: -------------------------------------------------------------------------------- 1 | 84 | 85 | 161 | 162 |

163 | 179 | 180 | 204 | --------------------------------------------------------------------------------