Article

searchTemplate

Searches for a media item based on user input.

Overview

Use the searchTemplate element to display a text field that takes user input in order to search for a specific item; for example, looking for a specific movie to download. Developers can also display preselected results in a shelf, list, or collectionList element under the search field. The following figure shows the basic layout for a searchTemplate page. The theme for the search template defaults to the system preference.

Layout diagram showing a search field at the top, a keyboard area directly below, and a large area for search results at the bottom.

Main Elements

The following listing shows the main elements of the searchTemplate element in TVML format.

<searchTemplate>
    <searchField />
    <shelf>
        <header>
            …
        </header>
        <section>
            <lockup>
                <img />
                <title>…</title>
            </lockup>
        </section>
    </shelf>
</searchTemplate>

Element Descriptions

collectionList

Element containing a group of options (such as most popular movies) or search results.

img

A figure representing a search result.

list

Element containing a list of options (such as most popular movies) or search results.

lockup

A group of elements describing a search result or prepopulated results.

searchField

A text field where the user is able to enter search terms. JavaScript is used to read the information entered.

section

Elements that are grouped together so that they can be treated as one element for layout purposes.

shelf

Element containing a row of options (such as most popular movies) or search results.

title

The title for a search result.

Example

The following listing shows the TVML for a searchTemplate example. The example displays a search field and keyboard along the top of the screen. A shelf is prepopulated with popular movies. Modify your main JavaScript file to accept the user input from the search field. For more information on available JavaScript functions, see TVMLKit JS.

<document>
    <searchTemplate>
        <searchField/>
        <shelf>
            <header>
                <title>Popular</title>
            </header>
            <section>
                <lockup>
                    <img src="path to images on your server/Car_Movie_250x375_A.png" width="182" height="274" />
                    <title>Movie 1</title>
                </lockup>
                <lockup>
                    <img src="path to images on your server/Car_Movie_250x375_B.png" width="182" height="274" />
                    <title>Movie 2</title>
                </lockup>
                <lockup>
                    <img src="path to images on your server/Car_Movie_250x375_C.png" width="182" height="274" />
                    <title>Movie 3</title>
                </lockup>
            </section>
        </shelf>
    </searchTemplate>
</document>

The following listing shows the output for the above example:

Screenshot showing a search field at the top of the screen and three movies at the bottom.

Topics

Valid TVML Attributes

binding

Associates information in a data item with an element.

itemID

Mark elements for reuse during DOM updates.

layoutDirection

Specifies the direction in which text is displayed.

prototype

Associates a data item type with an element.

theme

Sets the color scheme for an element.

See Also

Full-Page Templates

alertTemplate

Displays important information to the user.

catalogTemplate

Displays groups of items along one side of a page and images of a group's contents on the other side.

compilationTemplate

Displays information about a single media item and its components.

descriptiveAlertTemplate

Displays large amounts of important information to the user.

divTemplate

Provides the ability to create pages that don't conform to a layout defined by another template.

formTemplate

Provides the ability to gather information from the user.

listTemplate

Displays a list of items along one side of a page and the corresponding image on the other side.

loadingTemplate

Displays a spinner and description on the screen.

mainTemplate

Displays user options for a media item.

menuBarTemplate

Creates a page with items along the top and related information below.

oneupTemplate

Creates a page that allows users to navigate between full-screen images.

paradeTemplate

Displays a groups of items along one side of a page and scrolling images on the other side.

productBundleTemplate

Displays information for a group of related media items.

productTemplate

Displays detailed information about a single product.

ratingTemplate

Displays a rating for an item.

showcaseTemplate

Displays images the user can navigate between.

stackTemplate

Displays groups of products.

Using the productUberTemplate with scrollable regions

Specify regions in a page that are scrollable and not scrollable to use the the new product uber template