[AngularJS] HTML5 Autocomplete

[AngularJS]-HTML5-Autocomplete.markdown

[AngularJS] HTML5 Autocomplete

Through the element, we can provide a simple "native" autocomplete for modern browsers; when the the tag is not supported, a simple fallback with the tag will showcase. A Pen by jjperezaguinaga on CodePen. License.

index.html

<div class="container" ng-app=myApp ng-controller=myController>
  <div class="row header">
    <h1>AngularJS HTML5 Autocomplete</h1>
    <h3>Type out a flight destination</h3>
  </div>
  <div class="row body">
    <form action="#">
      <ul>
        <li>
          <p class="left">
            <input type="text" keyboard-poster post-function="searchFlight" name="first_name" placeholder="Zurich, Switzerland" list="_countries" style='margin-bottom: 100px'>
            <datalist id="_countries">
             <select style="display: none;" id="_select" name="_select" ng-model='selectedCountry' ng-options='k as v for (k,v) in countries'></select>
</datalist>
          </p>
                    <div class="application-waymate_logo"></div>
          <p class='right'>
           <label for="first_name">Powered by <a href="https://www.waymate.de"></a></label>
          </p>
        </li>        
      </ul>
    </form>  
  </div>
</div>

script.js

angular.module('myApp', [])
.config(['$httpProvider', function($httpProvider) {
	$httpProvider.defaults.useXDomain = true;
	delete $httpProvider.defaults.headers.common['X-Requested-With'];
}])
.service('Geolocator', function($q, $http){
  var API_URL = 'http://jjperezaguinaga.webscript.io/waymate?term=';
  this.searchFlight = function(term) {
    var deferred = $q.defer();
 $http.get(API_URL+term).then(function(flights){
   var _flights = {};
   var flights = flights.data;
   for(var i = 0, len = flights.length; i < len; i++) {
     _flights[flights[i].name] = flights[i].country;
   }
      deferred.resolve(_flights);
    }, function() {
      deferred.reject(arguments);
    });
    return deferred.promise;
  } 
})
.controller('myController', function($scope, $timeout, Geolocator) {
  $scope.selectedCountry = null;
  $scope.countries = {};
  $scope.mockSearchFlight = function() {
      $scope.countries= {
        'Zurich': 'Switzerland',
        'Canada': 'Vancouver'
      }
  }
  $scope.searchFlight = function(term) {
    Geolocator.searchFlight(term).then(function(countries){
      $scope.countries = countries;
    });
  }
})
.directive('keyboardPoster', function($parse, $timeout){
  var DELAY_TIME_BEFORE_POSTING = 0;
  return function(scope, elem, attrs) {
    
    var element = angular.element(elem)[0];
    var currentTimeout = null;
   
    element.oninput = function() {
      var model = $parse(attrs.postFunction);
      var poster = model(scope);
      
      if(currentTimeout) {
        $timeout.cancel(currentTimeout)
      }
      currentTimeout = $timeout(function(){
        poster(angular.element(element).val());
      }, DELAY_TIME_BEFORE_POSTING)
    }
  }
})

style.scss

@import "compass/css3";
/* 
CSS+HTML Credits to Nickhaskell Codepen http://codepen.io/nickhaskell/pen/HoGsm
*/ 

// Font imports

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

// Color vars

$white: #fff;
$grey: #ccc;
$dark_grey: #555;
$blue: #4f6fad;
$pink: #ee9cb4;

// Mixins

@mixin lato-book { font-family: 'Lato', sans-serif; font-weight: 300; }
@mixin lato-reg { font-family: 'Lato', sans-serif; font-weight: 400; }
@mixin lato-bold { font-family: 'Lato', sans-serif; font-weight: 700; }
@mixin btn($color) {
  background-color: $color;
  border-bottom-color: darken($color, 15%);
  &:hover {
      background-color: lighten($color, 5%);
    }
}

// Functions

@function pxtoem($target, $context){
  @return ($target/$context)+0em;
}

//

body {
  background-color: lighten($grey, 10%); 
  font-size: 100%;
  @include lato-reg;
}
div, textarea, input {
  @include box-sizing(border-box); 
}  
.container {  
  max-width: 480px;
  min-width: 324px;
  margin: 50px auto 0;
  background-color: $white;
  border: 1px solid lighten($grey, 1%); 
  border-bottom: 3px solid $grey;
}
.row {
  width: 100%;
  margin: 0 0 1em 0;
  padding: 0 2.5em;
  &.header {
    padding: 1.5em 2.5em;
    border-bottom: 1px solid $grey; 
    background: url(http://niiiick.com/files/blur-city-1.jpg) left -80px;
    color: $white;
  }
  &.body {
    padding: .5em 2.5em 1em;
  }
}
.pull-right {
  float: right; 
}
h1 {
  @include lato-book;
  display: inline-block;
  font-weight: 100;
  font-size: pxtoem(45, 16);
  border-bottom: 1px solid hsla(100%, 100%, 100%, 0.3);
  margin: 0 0 0.1em 0;
  padding: 0 0 0.4em 0;
}
h3 {
  @include lato-reg;
  font-size: pxtoem(20, 16);
  margin: 1em 0 0.4em 0;
}
.btn {
  font-size: pxtoem(17, 16);
  display: inline-block;
  padding: 0.74em 1.5em;
  margin: 1.5em 0 0;
  color: $white;
  border-width: 0 0 0 0;
  border-bottom: 5px solid;
  text-transform: uppercase;
  @include btn(darken($grey, 10%));
  @include lato-book;
  &.btn-submit {
    @include btn($blue);
  }
}

form {
  max-width: 100%;
  display: block;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      margin: 0 0 0.25em 0; 
      clear: both;
      display: inline-block;
      width: 100%;
      &:last-child {
          margin: 0;    
        }
        p {
          margin: 0;
          padding: 0;
          display: block;
          &.right {
            float: right;
          }
        }     
        .divider {
          margin: 0.5em 0 0.5em 0;
          border: 0;
          height: 1px;
          width: 100%;
          display: block;
          background-color: $blue;
          background-image: linear-gradient(to right, $pink, $blue);
        }
        .req {
          color: $pink; 
        }
    }
  }
  label {
    display: block;
    margin: 0 0 0.5em 0;
    color: $blue;
    font-size: pxtoem(16, 16);
  }
  input {
    margin: 0 0 0.5em 0;
    border: 1px solid $grey;
    padding: 6px 10px;
    color: $dark_grey;
    font-size: pxtoem(16, 16);
    width: 100%;
  }
  textarea {
    border: 1px solid $grey;
    padding: 6px 10px;
    width: 100%;
    color: $dark_grey;
  }
  small {
    color: $blue;
    margin: 0 0 0 0.5em;
  }
}

// Media Queries

@media only screen and (max-width:480px) {
  .pull-right {
    float: none; 
  }
  input {
    width: 100%; 
  }
  label {
    width: 100%;
    display: inline-block;
    float: left;
    clear: both;
  }
  li, p {
   width: 100%; 
  }
  input.btn {
   margin: 1.5em 0 0.5em; 
  }
  h1 {
   font-size: pxtoem(36, 16); 
  }
  h3 {
    font-size: pxtoem(18, 16)
  }
  li small {
   display: none; 
  }
}

.application-waymate_logo {
  -webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url(https://d1owa9tldcvpwp.cloudfront.net/assets/application-s35e8df8f76-868e49bae290224beaaf73723ed38edd.png);
background-origin: padding-box;
background-position: 0px -134px;
background-size: auto;
border-bottom-color: rgb(85, 26, 139);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(85, 26, 139);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(85, 26, 139);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(85, 26, 139);
border-top-style: none;
border-top-width: 0px;
color: rgb(85, 26, 139);
cursor: auto;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 26px;
line-height: 18px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(85, 26, 139);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
vertical-align: baseline;
width: 150px;
  float: right;
}
.application-waymate_logo:before {
  content: '';

}
label{ display: block; }