<commit_before><h2 id="searchbar" class="section-header">Searchbar</h2>

<a class="improve-v2-docs" href="https://github.com/driftyco/ionic-site/edit/master/_includes/v2_fluid/component-docs/searchbar.html">
  Improve This Doc
</a>

A search bar binds to a model, and calls a function to update the page when the model is changed.

<h3 class="section-nav">Basic Usage</h3>
<a class="component-doc-demo" href="https://github.com/driftyco/ionic2/tree/master/demos/component-docs/inputs/search">
  View Demo Source
</a>

```html
<ion-searchbar [(ngModel)]="searchQuery"></ion-searchbar>
<ion-list #list>
  <ion-item *ngFor="#item of getItems()">
    {{item}}
  </ion-item>
</ion-list>
```

Note that in this example, the search bar binds to the `searchQuery` variable. The `getItems()` function is called when this variable changes, which updates the cities that are displayed. Although this example filters the list based on the search input, search bar can be used in many different scenarios:

```typescript
@Page({
  templateUrl: 'search/template.html',
})
class SearchPage{
  constructor() {
    this.searchQuery = '';
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  getItems() {
    var q = this.searchQuery;
    if(q.trim() == '') { return this.items; }
    return this.items.filter((v) => {
      if(v.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
        return true;
      }
      return false;
    })
  }
}
```
<commit_msg>docs(searchbar): update searchbar markup and documentation<commit_after><h2 id="searchbar" class="section-header">Searchbar</h2>

<a class="improve-v2-docs" href="https://github.com/driftyco/ionic-site/edit/master/_includes/v2_fluid/component-docs/searchbar.html">
  Improve This Doc
</a>

A search bar binds to a model, and calls a function to update the page when the model is changed.

<h3 class="section-nav">Basic Usage</h3>
<a class="component-doc-demo" href="https://github.com/driftyco/ionic2/tree/master/demos/component-docs/inputs/search">
  View Demo Source
</a>

```html
<ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="#item of items">
    {{ item }}
  </ion-item>
</ion-list>
```

Note that in this example, the Searchbar binds to the `searchQuery` variable. The `getItems()` function is called when the input changes, which updates the cities that are displayed. Although this example filters the list based on the search input, Searchbar can be used in many different scenarios:

```typescript
@Page({
  templateUrl: 'search/template.html',
})
class SearchPage {
  constructor() {
    this.searchQuery = '';
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  getItems(searchbar) {
    // Reset items back to all of the items
    this.initializeItems();

    // set q to the value of the searchbar
    var q = searchbar.value;

    // if the value is an empty string don't filter the items
    if (q.trim() == '') {
      return;
    }

    this.items = this.items.filter((v) => {
      if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
        return true;
      }
      return false;
    })
  }
}
```

The Searchbar takes a number of configuration options on the `<ion-searchbar>` element, such as `cancelButtonText` and `hideCancelButton`. Check out the [Searchbar API reference](../api/components/searchbar/Searchbar/) for more information on configuring a Searchbar.

{'fraction_non_alphanumeric': 0.14424450157097973, 'fraction_numerical': 0.004570122822050843, 'mean_word_length': 3.5837696335078535, 'pattern_counts': {'":': 0, '<': 32, '<?xml version=': 0, '>': 36, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6338079', 'n_tokens_mistral': 1125, 'n_tokens_neox': 1093, 'n_words': 318}