JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div ng-app='MyModule'>
  <div ng-controller='DefaultCtrl'>
    <input auto-complete src="'https://maps.googleapis.com/maps/api/geocode/json?address=Singapore, SG, Singapore, 153 Bukit Batok Street 1&sensor=true'"> selected = {{selected}}
  </div>
</div>

JavaScript

var app = angular.module('MyModule', []);
app.controller('DefaultCtrl', function($scope) {});
app.directive('autoComplete', function($http, $timeout) {
  return {
    restrict: "EA",
    scope: {
      src: "="
    },
    controller: function($scope) {
      $scope.gallery = [];

      $http({
        method: 'GET',
        url: $scope.src
      }).then(function(result) {
        $scope.gallery.push(result.data.results);
      }, function(result) {
        alert("Error: No data returned");
      });
    },
    link: function(scope, iElement, iAttrs) {
      iElement.autocomplete({
        source: scope.gallery,
        select: function() {
          $timeout(function() {
            iElement.trigger('input');
          }, 0);
        }
      });
    }
  };
});