typeahead-test

by hcentelles

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.1.0/lodash.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="TestApp">
    <div class="container-fluid"  ng-controller="TypeaheadCtrl">
        <label>Cell number</label>
        <form name="testForm" class="form-inline">
            <div class="tac">
            <input type="text" name="phone" class="input-small phone" ng-model="phone" 
                   typeahead="state for state in states | filter:$viewValue" maxlength="7" autocomplete="off"
            >
            </div>
            <input type="text" class="input-small name" ng-model="name">
            <b class="caret tpa-caret" ng-click="showTypeAhead()"></b>
        </form>
    </div>
</div>

CSS

.tac{
    display: inline-block;
}

input.phone{
    width: 60px;
    border-right: 0;

    -webkit-border-top-right-radius: 0;
         -moz-border-top-right-radius: 0;
              border-top-right-radius: 0;
    
     -webkit-border-bottom-right-radius: 0;
         -moz-border-bottom-right-radius: 0;
              border-bottom-right-radius: 0;
}

input.name{
    width: 120px;
    border-left: 0;

    -webkit-border-top-left-radius: 0;
         -moz-border-top-left-radius: 0;
              border-top-left-radius: 0;
    
     -webkit-border-bottom-left-radius: 0;
         -moz-border-bottom-left-radius: 0;
              border-bottom-left-radius: 0;
    
    margin-left: -4px;
}

input.phone:focus, input.name:focus{
  border-color: #ccc;
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

b.tpa-caret{
    margin-top: 13px;
    margin-left: -20px;
    cursor: pointer;
}

JavaScript

var app = angular.module('TestApp', ['ui.bootstrap.typeahead']);

app.controller('TypeaheadCtrl', function($scope, $rootScope){
    
    $scope.phone = undefined;
    $scope.name = undefined;
    $scope.states = ['3333402 Mamá', '2884830 Papá', '2927262 Gaby', '3445678 Juan Más', '3333213', '4563122'];
    
    $rootScope.$on('event:typeahead:select', function(event, data){  
      $scope.phone = data.split(" ")[0];
      $scope.name = data.split(" ").slice(1).join(" ");
    });
    
    $scope.showTypeAhead = function(){
        $rootScope.$broadcast('event:typeahead:showall', $scope.states);
    };
    
    $scope.$watch('testForm.phone.$viewValue', function(newValue, oldValue){
        if(_.find($scope.states, function(value){ return value.split(" ")[0] === newValue;})){
            console.log("match", newValue, oldValue);
            $scope.name = oldValue.split(" ").slice(1).join(" ");
        } else {
            console.log("not match", newValue, oldValue);            
            $scope.name = "";
        }
    });
    
    // Later this will be implemented using angular
    var phoneElement = $(".phone");
    var nameElement = $(".name");
    
    nameElement.focus(function(){
        phoneElement.focus();
    });
    
    phoneElement.focus();
});


































angular.module('ui.bootstrap.typeahead', [])

/**
 * A helper service that can parse typeahead's syntax (string provided by users)
 * Extracted to a separate service for ease of unit testing
 */
  .factory('typeaheadParser', ['$parse', function ($parse) {

  //                      00000111000000000000022200000000000000003333333333333330000000000044000
  var TYPEAHEAD_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+(.*)$/;

  return {
    parse:function (input) {

      var match = input.match(TYPEAHEAD_REGEXP), expanded, viewMapper, source;
      if (!match) {
        throw new Error(
          "Expected typeahead specification in form of...