---
title: searchTemplate
framework: tvml
role: collectionGroup
path: tvml/searchtemplate
---

# searchTemplate

Searches for a media item based on user input.

## Overview

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.

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> note: The shelf element can be replaced with a collectionList or list element to change the look of the search results. Element Descriptions 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:

## Topics

### Valid TVML Attributes

- [binding](tvml/binding.md)
- [itemID](tvml/itemid.md)
- [layoutDirection](tvml/layoutdirection.md)
- [prototype](tvml/prototype.md)
- [theme](tvml/theme.md)

## See Also

### Full-Page Templates

- [alertTemplate](tvml/alerttemplate.md)
- [catalogTemplate](tvml/catalogtemplate.md)
- [compilationTemplate](tvml/compilationtemplate.md)
- [descriptiveAlertTemplate](tvml/descriptivealerttemplate.md)
- [divTemplate](tvml/divtemplate.md)
- [formTemplate](tvml/formtemplate.md)
- [listTemplate](tvml/listtemplate.md)
- [loadingTemplate](tvml/loadingtemplate.md)
- [mainTemplate](tvml/maintemplate.md)
- [menuBarTemplate](tvml/menubartemplate.md)
- [oneupTemplate](tvml/oneuptemplate.md)
- [paradeTemplate](tvml/paradetemplate.md)
- [productBundleTemplate](tvml/productbundletemplate.md)
- [productTemplate](tvml/producttemplate.md)
- [ratingTemplate](tvml/ratingtemplate.md)