Truc 2 : Autocomplétion Google avec Angular et ngAutoComplete.

Introduction :


Petite librairie ngAutoComplete permettant l’autocomplétion Google dans des champs input: A tester ici 

Idéal à intégrer dans un projet.

Autres liens :

https://developers.google.com/maps/documentation/javascript/places-autocompletehttps://developers.google.com/maps/documentation/javascript/places-autocomplete

Le Code




<html ng-app="Test">
<head>

    <meta charset="utf8" >
	<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"href="style.css">
    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
    <script src="script.js"></script>
    <script src="librairies/ngAutocomplete.js"></script>
  
  
</head>

<body>

<div ng-controller="TestCtrl">

<form id="form" role="form">

    <div class="form-group move-down">
        <label for="Autocomplete">Autocompletion Générique</label>
        <input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result1" />
    </div>
    <div>resultat: {{result1}}</div>


    <div class="form-group move-down">
        <label for="Autocomplete">Autocompletion - Villes de France ou département</label>
        <input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result2" details="details2" options="options2"/>
    </div>
    <div>resultat: {{result2}}</div>
    
    <div class="form-group move-down">
        <label for="Autocomplete">Autocompletion - Entreprises de France</label>
        <input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result3" details="details3" options="options3"/>
    </div> 
     <div>resultat: {{result3}}</div>
</form>
</div>


</body>
</html>

<script>
angular.module( "Test", ['ngAutocomplete'])
  .controller("TestCtrl",function ($scope) {

    $scope.result1 = 'Entrez une recherche';
    $scope.options1 = null;
    $scope.details1 = '';

$scope.modd

    $scope.result2 = '';
    $scope.options2 = {
      country: 'fr',
      types: 'geocode'
      
    };    $scope.details2 = '';
    
    
    
    $scope.result3 = '';
    $scope.options3 = {
      country: 'fr',
	  
      types: 'establishment'
    };
    $scope.details3 = '';
  });
</script>

Publicités