Tabris.js Widgets: SearchAction
This widget displays a search text field with dynamic proposals when selected. You can fill the proposals list when the widget is created, or you can use onInput event to load proposals dynamically. After the user submits a search query, listen to the onAccept event to load search results on the page.
Here is a simple code example:
|
1 2 3 4 5 6 7 8 |
import { SearchAction, NavigationView, contentView } from 'tabris'; const navigationView = new NavigationView({ layoutData: 'stretch' }).appendTo(contentView); new SearchAction({ title: 'Search' }) .onInput(event => console.log(`Input text: ${event.text}`)) .onAccept(event => console.log(`Final query: ${event.text}`)) .appendTo(navigationView); |
Note that SearchAction is an Action child class and therefore can’t be appended directly to the contentView. It can be displayed only as a part of NavigationView. If you feel like you want to see a search bar inside the page body, TextInput widget will help.
And here is how you can use SearchAction with proposals list:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Button, Composite, NavigationView, Page, SearchAction, TextView, contentView, device } from 'tabris'; const IMAGE = device.platform === 'iOS' ? 'resources/search-black-24dp@3x.png' : 'resources/search-white-24dp@3x.png'; const proposals = ['baseball', 'batman', 'battleship', 'bangkok', 'bangladesh', 'banana']; contentView.append( <NavigationView stretch> <SearchAction title='Search' image={IMAGE} onSelect={ev => ev.target.text = ''} onInput={ev => updateProposals(ev.text)} onAccept={ev => $(TextView).only().text = `Selected "${ev.text}"` } /> <Page title='Search action'> <Composite center> <TextView /> <Button centerX top='prev() 10' text='Open Search' onSelect={() => action.open()} /> </Composite> </Page> </NavigationView> ); const action = $(SearchAction).only(); updateProposals(''); function updateProposals(query) { action.proposals = proposals.filter(proposal => proposal.indexOf(query.toLowerCase()) !== -1); } |
You can also start showing proposals when more than N characters are entered or load suggestions list from a remote data source.
For more detailed information about the widget, use the SearchAction documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
