| OLD | NEW |
| (Empty) |
| 1 --- | |
| 2 layout: default | |
| 3 title: Searchable List | |
| 4 live_example_url: example/index.html | |
| 5 | |
| 6 header: | |
| 7 css: ["/samples/samples.css"] | |
| 8 --- | |
| 9 | |
| 10 ## {{ page.title }} | |
| 11 | |
| 12 This simple application shows the use of a custom element where list data is | |
| 13 searchable. The demonstrates the following parts of Polymer: | |
| 14 | |
| 15 * defining custom elements | |
| 16 * the `<template>` tag | |
| 17 * HTML imports | |
| 18 * data binding | |
| 19 | |
| 20 | |
| 21 The `<searchable-list>` element uses data binding to implement search. | |
| 22 See the `searchable_list.html` and the `searchable_list.dart` files for the | |
| 23 code. | |
| 24 | |
| 25 The `SearchableList` class uses three variables in the search implementation: | |
| 26 | |
| 27 * `data` stores all the data in the list | |
| 28 * `searchParam` stores the search parameter | |
| 29 * `results` stores the elements of `data` that match the search paramater | |
| 30 | |
| 31 When the user types in the search input, the `search()` method triggers, and | |
| 32 the value of `results` is updated. Since `results` is an observable variable, | |
| 33 its representation in the UI automatically updates as its contents change. | |
| 34 | |
| 35 Here is the minimal code for required to implement search | |
| 36 (`searchable_list.dart`): | |
| 37 | |
| 38 search() { | |
| 39 results.clear(); | |
| 40 String lower = searchParam.toLowerCase(); | |
| 41 results.addAll(data.where((d) => d.toLowerCase().contains(lower))); | |
| 42 } | |
| 43 | |
| 44 Any changes to `searchParam` trigger `search()`. Here is the code for that | |
| 45 (the `enteredView()` method in `searchable_list.dart`): | |
| 46 | |
| 47 onPropertyChange(this, #searchParam, search); | |
| 48 | |
| 49 Read the | |
| 50 [source](https://github.com/dart-lang/sample-searchable-list). | |
| 51 | |
| 52 <iframe class="running-app-frame" | |
| 53 style="height:500px;width:100%;" | |
| 54 src="{{page.live_example_url}}"> | |
| 55 </iframe> | |
| 56 | |
| 57 See all [samples](/samples/) | |
| OLD | NEW |