Svelte Filter List component

README.md

Svelte Filter List component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

<div class="filtering-list">
	<div class="filter-search">
		<input bind:value="q" type="text" class="search">
	</div>

	<ul class="filter-list">
		{{#each filteredList as name}}
			<li>#{{name}}</li>
		{{/each}}
	</ul>
	{{#if filteredList == ''}}
		<p class="filter-no-match">There is no item matching '{{q}}' that can be displayed.</p>
	{{/if}}
</div>

<script>
	let startsWith = (item, query) => item.toLowerCase().indexOf(query.toLowerCase()) != -1;

	export default {
		data() {
			return {
				q: '',
				list: ['angular', 'backbone', 'ember', 'glimmer', 'react', 'svelte', 'vue']
			}
		},
		computed: {
			filteredList(q, list) {
				return q && q.length 
					? list.filter(item => startsWith(item, q)) : list;
			}
		}
	}
</script>

<style>
	.filtering-list {
		font-size: 18px;
		padding: 10px;
	}
	.search {
		border: 1px solid #ccc;
		border-radius: 10px;
		font-size: 18px;
		padding: 15px 12px;
		outline: none;
		width: 100%;
	}
	.filter-list {
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}
	.filter-list li:first-child {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.filter-list li:last-child {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.filter-list li {
		margin-bottom: -1px;
		padding: 10px;
		background-color: #fff;
		border: 1px solid #ddd;
		color: #333;
	}
	.filter-no-match {
		background-color: #ddd;
		padding: 15px;
	}
</style>

data.json

{
  "name": "world"
}