OnsSearchInput Directive (ons-search-input)

<ons-search-input>要素のAngularディレクティブです。

実例

Search input

Even though ons-input supports type="search", Onsen UI provides an extra element ons-search-input that styles the input as a real search bar:

<ons-search-input placeholder="Search something"></ons-search-input>

As usual, any attribute for <input> element works for the search input (except type which is fixed to search).

Inner input element

For normal input elements is possible to define a <label> tab with the for attribute to link it to an input element.

Unfortunately this does not work with custom elements like <ons-label> so in order to do it we need to set the id attribute of the inner input element. This is done using the input-id attribute.

<label for="username">Username</label>
<ons-input input-id="username"></ons-input>

This work with any input in Onsen UI such as checkboxes, radios, etc.

関連情報

属性

名前 型 / デフォルト値 概要
input-id String Specify the “id” attribute of the inner <input> element. This is useful when using <label for="..."> elements. (翻訳中) Optional.

プロパティ概要

名前 概要
value The current value of the input. (翻訳中)
disabled 無効化されている場合にtrue

プリセットのmodifier

Name 概要
material Displays a Material Design search input. (翻訳中)

Inputs

名前 概要
value {string} 内部のinput要素に対する入力値を設定します。

Outputs

名前 概要
valueChange {string} 内部のinput要素の値が変更された時に発火します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。