action on enter in ember

Question

Is there anyway for this text input

<input type="text" aria-controls="existing-user-table" placeholder="Search">

to trigger an action on the controller when the user hits enter?

I don't like to enclose it in a form tag or create a button, just that input textfield.

Answer 1

Use the {{input}} helper - if you include an action parameter it will trigger that action on the controller when the user hits enter. So:

{{input action="myAction" aria-controls="existing-user-table" placeholder="Search"}}

The input helper api docs do not mention this capability, but the helper just wraps Ember.TextField

Also it is possible to trigger the action on keyPress instead of enter by specifying the onEvent property:

{{input action="myAction" onEvent="keypress" aria-controls="existing-user-table" placeholder="Search"}}

Answer 2

The input helper has an insert-newline action that will trigger when the user hits the enter key.

{{input type='text' aria-controls='existing-user-table' placeholder='Search' insert-newline='myAction'}}

Text Input Helpers

Insert Newline docs

Answer 3

From Ember v1.13.0 the action on input helper is depricated we should use useenter or key-press instead of action

Refer Ember Docs

{{input value=someValue enter='someAction'}}

this will trigger the mentioned action when the user press enter on the text input