0

How to trigger the event in typeahead. I have the code below using typeahead and when user selects any username in the drop-down box of typeahead I want to fill the user.full_name in the text box below. Do you have any suggestion what event should in use in typeahead input. Any suggestion

<div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="form-group has-feedback" ng-class="showError(userform.username)">
              <label class="col-sm-4 control-label">{{'USER.USERNAME' | translate}}:</label>
              <div class="col-sm-8">
                <input type="text" name="username" 
                ng-model="user.username" required ng-init="setTimeout($element.focus(), 500)" 
                typeahead="user as user.username for user in users | filter:$viewValue | limitTo:8"
                typeahead-on-select="select($model)"
                class="form-control">
                <span ng-show="showError(userform.username)" class="glyphicon glyphicon-remove form-control-feedback"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="form-group has-feedback" ng-class="showError(userform.full_name)">
              <label class="col-sm-4 control-label">{{'USER.FULLNAME' | translate}}:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="full_name" ng-model="user.full_name">
                <span ng-show="showError(userform.full_name)" class="glyphicon glyphicon-remove form-control-feedback"></span>
              </div>
            </div>
          </div>
        </div>

Below is part of my controller

.controller('AdminUsersController', ['$rootScope', '$scope', '$state', '$stateParams', '$modal', '$log', '$timeout', 'usersApi', 'policiesApi','workspacesApi', 'msg', '$filter',
  function($rootScope, $scope, $state, $stateParams, $modal, $log, $timeout, usersApi, policiesApi, workspacesApi,msg, $filter) {
    var self = this,
      limit = 100,
....

 $scope.select = function (item) {
      console.log('********* This is select ');
      $scope.user.full_name = item.full_name;
      console.log('foo', item);
    };
    // Finally initialize the page
    self.refresh();
...
kim2014
  • 107
  • 1
  • 2
  • 16
  • possible duplicate of [angular ui-bootstrap typeahead callback on selectMatch?](http://stackoverflow.com/questions/16109364/angular-ui-bootstrap-typeahead-callback-on-selectmatch) – Freezystem Jul 14 '15 at 09:11

1 Answers1

0

Assuming you're using AngularStrap TypeAhead,
to trigger user input you just have to do :

$scope.$on('$typeahead.select', function(event, value, index, elem){
     $scope.user.full_name = value;
});
Freezystem
  • 4,494
  • 1
  • 32
  • 35
  • Yes I am using AngularBootStrap TypeAhead but add the code that you suggested didn't work – kim2014 Jul 12 '15 at 08:12
  • [AngularBootStrap TypeAhead](http://angular-ui.github.io/bootstrap/#/typeahead) and [AngularStrap TypeAhead](http://mgcrea.github.io/angular-strap/#/typeaheads) are not the same. This was not clear in your question. I'll update my answer to take that in account. Could you update your question with your controller code ? – Freezystem Jul 12 '15 at 09:15
  • Thanks! I used Typeahead (ui.bootstrap.typeahead) but have tried your code above and it didn't work too. Any other suggestion – kim2014 Jul 13 '15 at 20:28
  • actually I was asking you to edit your question and put your controller code in it. Then I'll update my answer to fit your needs. – Freezystem Jul 13 '15 at 22:04