| Index: src/site/samples/searchable_list/index.markdown
|
| diff --git a/src/site/samples/searchable_list/index.markdown b/src/site/samples/searchable_list/index.markdown
|
| deleted file mode 100644
|
| index f1b137d62d599eb3f447b9487aa2c120792d1595..0000000000000000000000000000000000000000
|
| --- a/src/site/samples/searchable_list/index.markdown
|
| +++ /dev/null
|
| @@ -1,57 +0,0 @@
|
| ----
|
| -layout: default
|
| -title: Searchable List
|
| -live_example_url: example/index.html
|
| -
|
| -header:
|
| - css: ["/samples/samples.css"]
|
| ----
|
| -
|
| -## {{ page.title }}
|
| -
|
| -This simple application shows the use of a custom element where list data is
|
| -searchable. The demonstrates the following parts of Polymer:
|
| -
|
| -* defining custom elements
|
| -* the `<template>` tag
|
| -* HTML imports
|
| -* data binding
|
| -
|
| -
|
| -The `<searchable-list>` element uses data binding to implement search.
|
| -See the `searchable_list.html` and the `searchable_list.dart` files for the
|
| -code.
|
| -
|
| -The `SearchableList` class uses three variables in the search implementation:
|
| -
|
| -* `data` stores all the data in the list
|
| -* `searchParam` stores the search parameter
|
| -* `results` stores the elements of `data` that match the search paramater
|
| -
|
| -When the user types in the search input, the `search()` method triggers, and
|
| -the value of `results` is updated. Since `results` is an observable variable,
|
| -its representation in the UI automatically updates as its contents change.
|
| -
|
| -Here is the minimal code for required to implement search
|
| -(`searchable_list.dart`):
|
| -
|
| - search() {
|
| - results.clear();
|
| - String lower = searchParam.toLowerCase();
|
| - results.addAll(data.where((d) => d.toLowerCase().contains(lower)));
|
| - }
|
| -
|
| -Any changes to `searchParam` trigger `search()`. Here is the code for that
|
| -(the `enteredView()` method in `searchable_list.dart`):
|
| -
|
| - onPropertyChange(this, #searchParam, search);
|
| -
|
| -Read the
|
| -[source](https://github.com/dart-lang/sample-searchable-list).
|
| -
|
| -<iframe class="running-app-frame"
|
| - style="height:500px;width:100%;"
|
| - src="{{page.live_example_url}}">
|
| -</iframe>
|
| -
|
| -See all [samples](/samples/)
|
|
|