0

I've found OnsenUI for develop with Cordova and I'm testing their components

http://onsenui.io/guide/components.html

I stop in ons-search-input

<ons-navigator title="Search Input">
   <ons-search-input 
       ng-model="searchText" 
       placeholder="Search">
   </ons-search-input>
</ons-navigator>

But I don't know how it works, for example, within a list (ons-list), is there any example??

Thanks

khemry
  • 585
  • 3
  • 7
Shanty
  • 157
  • 1
  • 1
  • 9
  • I found that sample. Everything is AngularJS. http://docs.angularjs.org/api/ng/filter/filter – Shanty Apr 14 '14 at 12:34

1 Answers1

1

Just put it in ons-list

<ons-navigator title="Search Input">
  <ons-list>
    <ons-list-item style="padding-top: 5px">
     <ons-search-input
        ng-model="searchText" 
        placeholder="Search">
     </ons-search-input>   
    </ons-list-item>

    <ons-list-item>
      Item 1
    </ons-list-item>
    <ons-list-item>
      Item 2
    </ons-list-item>
    <ons-list-item>
      Item 3
    </ons-list-item>
  </ons-list>

</ons-navigator>

Here is the plunkr

http://plnkr.co/edit/OkASen?p=preview

Tamura
  • 1,788
  • 1
  • 14
  • 10
  • I'm here because I tried to do a filtered list, but put `ons-search-input` outside the `ons-list` tag only to have it being covered by the list. Do you know which part of the docs would have told me to add a `ons-list-item` containing the `ons-search-input` for it to actually be visible? – ivarni May 23 '14 at 21:49