Search input

Search input

• Basics
• Options
• Methods
• Events

Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an input with a type="search" attribute in your markup.

Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

<div data-role="fieldcontain">
    <label for="search">Search Input:</label>
    <input type="search" name="password" id="search" value="" />
</div>

The search input is displayed like this:

Themed variation:

Calling the textinput plugin

This plugin will auto initialize on any page that contains a text input with the type="search" attribute, no need for a data-role attribute in the markup. However, if needed you can directly call the textinput plugin on a selector, just like any jQuery plugin:

$('.mySearchInput').textinput();