Invoke query filter on Enter using Angular

Question

I'm relatively new to AngularJS, and I'm attempting to build a simple Whiskey search application. Angular makes it easy to bind an input element and my results, but the results filter as the user is typing. I don't want the filter to happen until the user hits Enter.

Here is my code for the input search:

<input type="text" class="form-control" placeholder="start typing and hit enter" ng-model="query">

And here is my results:

<div class="col-lg-12" ng-controller="WhiskeyListCtrl">
        <div class="row">
            <div class="col-sm-3" ng-repeat="whiskey in whiskeys | filter:query">
                <div class="whiskey-container"> 
                    <a href="#/whiskeys/{{whiskey.id}}"><img ng-src="{{whiskey.images[0]}}" height="200" width="200"/></a>
                    <whiskey-title></whiskey-title>
                    <whiskey-desc></whiskey-desc>
                </div>
            </div>
        </div>
    </div>

Any help would be greatly appreciated!

Balakrishnan · Accepted Answer · 2015-09-19T17:06:04.497

1

You can use ngModelOptions

<input type="text" class="form-control" placeholder="start typing and hit enter" ng-model="query" ng-model-options="{updateOn : 'change blur'}">

edited Sep 19 '15 at 17:06

answered Sep 19 '15 at 17:00

Balakrishnan

2,403
2
26
47

Welcome, but you cannot say thanks here you have to click the tick mark on my answer to accept it. – Balakrishnan Sep 19 '15 at 17:09
I know, I was just waiting because it didn't let me accept the answer so soon. Thanks again. – mdeang2 Sep 19 '15 at 17:15

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Does this help to you? How to use a keypress event in AngularJS?

Look at this by user name Rodolfo Jorge Nemer Noguieria:

Another simple alternative:

<input ng-model="edItem" type="text" 
    ng-keypress="($event.which === 13)?foo(edItem):0"/>

And the ng-ui alternative:

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>

edited May 23 '17 at 12:16

Community

1
1

answered Sep 19 '15 at 17:00

Ram Mudaliar

541
2
5
12

Invoke query filter on Enter using Angular

2 Answers2