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.
[Image]
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:
[Image]