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
Name 概要
material Displays a Material Design search input. (翻訳中)
シグネチャ 概要
focus() Focuses the input. (翻訳中)
blur() Removes focus from the input. (翻訳中)
focus()

Focuses the input. (翻訳中)

blur()

Removes focus from the input. (翻訳中)

Inputs

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

Outputs

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

お困りですか?

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

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

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