Clear selected input in angular bootstrap typeahead

StackOverflow https://stackoverflow.com/questions/22447881

Question

I am using http://angular-ui.github.io/bootstrap/#/typeahead for a simple array lookup example.

I would like to trigger list() when I empty the input field and press enter. Currently I could program another Clear button to do this. But how to allow keypress when the input is empty? I want user to select from the list or clear it only. There should no other values.

HTML

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <script type="text/ng-template" id="customTemplate.html">
    < a > < img ng - src = "http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}"
    width = "16" > < span bind - html - unsafe = "match.label | typeaheadHighlight:query" > < /span>
  </a >
  </script>
  <div class='container-fluid' ng-controller="TypeaheadCtrl">

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" typeahead-on-select="list()" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
    <button ng-click="clear()">Clear</button>
  </div>
</body>

</html>

Javascript

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope, $http) {

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

  $scope.list = function() {
    alert($scope.selected);
  }

  $scope.clear = function() {
    $scope.selected = undefined;
    $scope.list();
  }
}

http://plnkr.co/edit/roushmavR67rhXTJNc8K?p=preview

Was it helpful?

Solution

The purpose of the typeahead is to give hints at possible selections, but allow non-selections as well (by default anyway). What your trying to do is essentially just a select box:

<select ng-options='state for state in states'></select>

But if you do want to simulate this select box idea with only allowing the select options in a typeahead then you need to use the ng-keypress directive and pass the $event internal variable:

Controller addition:

$scope.testAllowed = function( evt ){
    if( evt.keyCode === 13 && 
        $scope.selected && 
        $scope.states.indexOf( $scope.selected ) < 0){

      $scope.selected = '';
    }
  }

Input html addition:

ng-keypress="testAllowed($event)"

Example plunkr

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top