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 |