JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://hakib.github.io/MassAutocomplete/massautocomplete.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-sanitize.min.js"></script>
<div ng-app=app>
  <div class="container" ng-controller=mainCtrl ng-cloak>
    <br/>
    <form class="form-horizontal" name="requestForm">
      <div class="form-group required">
        <label for="location" class="col-xs-2 control-label" style=" padding: 0;padding-right: 7px;">Location</label>
        <div class="col-xs-5" mass-autocomplete data-ng-class="{'has-error':(requestForm.location.$invalid && requestForm.location.$touched)}">
          <input type="text" mass-autocomplete-item="autocomplete_options" class="form-control" name="location" id="location" placeholder="Location" ng-model="location" required>
          <ng-messages for="requestForm.location.$error" data-ng-show="(requestForm.location.$invalid && requestForm.location.$touched)">
            <ng-messages when="required">Location is required</ng-messages>
          </ng-messages>
        </div>
        <div class="col-xs-5">
        </div>
      </div>
      <div class="form-group required">
        <label for="contact" class="col-xs-2 control-label">Contact</label>
        <div class="col-xs-5">
          <input type="number" class="form-control" name="contact" id="contact" placeholder="Phone/Mobile Number" ng-model="contact" required>
        </div>
        <div class="col-xs-5">
        </div>
      </div>
    </form>
  </div>
</div>

CSS

.ac-container {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 999;
}

.ac-container .ac-menu {
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  background-color: white;
  box-shadow: 0 3px 7px 0px rgba(0, 0, 0, 0.15);
  margin: 0;
  position: absolute;
  width: 100%;
  z-index: 9999;
}

.ac-container .ac-menu .ac-menu-item {
  border-bottom: 1px dotted #ccc;
  line-height: 35px;
  margin: 0;
}

.ac-container .ac-menu .ac-menu-item:last-child {
  border-bottom: 0;
}

.ac-container .ac-menu .ac-menu-item:hover {
  background-color: #e0eaff;
}

.ac-container .ac-menu a {
  padding-left: 5px;
  display: block;
  color: inherit;
  text-decoration: none;
}

.ac-container .ac-menu .ac-state-focus {
  outline: none;
  background-color: #e0eaff;
}

JavaScript

var app = angular.module('app', ['ngSanitize', 'MassAutoComplete']);

  app.controller('mainCtrl', function($scope, $sce, $q, $http) {

    locations = [{
      id: 1,
      loc_name: 'Mumbai',
      pin_code: '555555'
    }, {
      id: 2,
      loc_name: 'Bengaluru',
      pin_code: '6666666'
    }, {
      id: 3,
      loc_name: 'Mangaluru',
      pin_code: '777777'
    }, {
      id: 4,
      loc_name: 'Meerat',
      pin_code: '8888888'
    }];

    function suggest_location(term) {
      var q = term.toLowerCase().trim();
      var results = [];

      // Find first 10 locations that start with `term`.
      for (var i = 0; i < locations.length && results.length < 10; i++) {
        var location = locations[i];
        if (location.loc_name.toLowerCase().indexOf(q) === 0)
          results.push({
            label: location.loc_name,
            value: location.loc_name,
            obj: location
          });
      };
      $scope.pin = '';

      return results;
    }

    $scope.autocomplete_options = {
      suggest: suggest_location,
      on_select: function(selected) {
        $scope.Id = selected.obj.id;
      }
    };

  });