Titanium Mobile

# Titanium.UI.Android.SearchView

A specialized text field for entering search text.

Availability
3.0.2
Extends
Titanium.UI.View

# Overview

SearchView provides a user interface to enter a search query and submit a request to a search provider.

Search views are most commonly used for filtering the rows in a Titanium.UI.TableView. Similar to Titanium.UI.SearchBar, you can add a search view to a table view by setting the table view's Titanium.UI.TableView.search property. A search view can be used without a TableView.

You can also use a SearchView object as the Titanium.UI.ListView.searchView property of a Titanium.UI.ListView object.

You can also add SearchView to an ActionBar as a view (see example below).

Use the Titanium.UI.Android.createSearchView method or <SearchView> Alloy element to create a search view. You must set the Alloy element's ns attribute to Ti.UI.Android:

<SearchView ns="Ti.UI.Android" platform="android"/>

# Examples

# Search View for Table in Action Bar

The following example creates a SearchView widget for a TableView and displays it as an Action Bar item if the Google API level is 11 or later. If not, it defaults to use the search bar.

var win = Ti.UI.createWindow({
    backgroundColor: 'blue',
    fullscreen: false
});

// Use action bar search view
var search = Ti.UI.Android.createSearchView({
    hintText: "Table Search"
});

win.activity.onCreateOptionsMenu = function(e) {
    var menu = e.menu;
    var menuItem = menu.add({
        title: 'Table Search',
        actionView : search,
        icon: (Ti.Android.R.drawable.ic_menu_search ? Ti.Android.R.drawable.ic_menu_search : "my_search.png"),
        showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM | Ti.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW
    });
};

var data = [];
data.push(Ti.UI.createTableViewRow({title:'Apple'}));
data.push(Ti.UI.createTableViewRow({title:'Banana'}));
data.push(Ti.UI.createTableViewRow({title:'Orange'}));
data.push(Ti.UI.createTableViewRow({title:'Raspberry'}));

var tableview = Titanium.UI.createTableView({
    data: data,
    search: search,
    searchAsChild: false
});

win.add(tableview);
win.open();

# Alloy XML Markup

Previous example as an Alloy project.

index.xml:

<Alloy>
    <Window id="win" backgroundColor="blue" fullscreen="false" layout="vertical">
        <TableView id="tableview" top="10" searchAsChild="false">
            <TableViewRow title="Apple" />
            <TableViewRow title="Banana" />
            <TableViewRow title="Orange" />
            <TableViewRow title="Raspberry" />
        </TableView>
    </Window>
</Alloy>

index.js:

// use action bar search view
var search = Alloy.createController("searchview").getView();
$.tableview.search = search;
$.win.addEventListener("open", function() {
    $.win.activity.onCreateOptionsMenu = function(e) {
        e.menu.add({
            title: "Table Search",
            icon: (Ti.Android.R.drawable.ic_menu_search ? Ti.Android.R.drawable.ic_menu_search : "my_search.png"),
            actionView: search,
            showAsAction : Ti.Android.SHOW_AS_ACTION_ALWAYS | Ti.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW
        });
    }
    $.win.activity.invalidateOptionsMenu();
});

$.win.open();

searchview.xml:

<Alloy>
    <SearchView id="searchView" ns="Ti.UI.Android" platform="android" hintText="Table Search" />
</Alloy>

# Properties

# color

Availability
3.0.2
color :String

Color of the text in this SearchView, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.

# hintText

Availability
3.0.2
hintText :String

Text to show when the search view field is not focused.

Default: no hint text

# hintTextColor

Availability
7.1.0
hintTextColor :String

Color of hint text that displays when field is empty.

Color of hint text that displays when field is empty.

Default: Default Android theme's hint text color.

# iconified

Availability
3.0.2
iconified :Boolean

Iconifies or expands the search view

see Android Documentation for more details.

Default: undefined

# iconifiedByDefault

Availability
3.0.2
iconifiedByDefault :Boolean

Sets the default or resting state of the search view

see Android Documentation for more details.

Default: true

# submitEnabled

Availability
3.0.2
submitEnabled :Boolean

Whether to display the submit button when necessary or never display.

Default: undefined

# value

Availability
3.0.2
value :String

Value of the search view.

This value cannot be set until after the search view is created.

# Methods

# blur

Availability
3.0.2
blur() → void

Causes the search view to lose focus.

Returns

Type
void

# focus

Availability
3.0.2
focus() → void

Causes the search view to gain focus.

Returns

Type
void

# Events

# focus

Availability
3.0.2

Fired when the search view gains focus.

This event only fires when using the trackball to navigate.

# blur

Availability
3.0.2

Fired when the search view loses focus.

# cancel

Availability
3.0.2

Fired when the cancel button is pressed.

Due to the current Android Issue, this event does not work with Android 4.0+. Alternatively, when using SearchView in the action bar, you can listen for the collapse event.

# change

Availability
3.0.2

Fired when the value of the search view changes.

# submit

Availability
3.0.2

If the search query is not empty, fired when the search button is clicked on soft keyboard

Contents