2017-04-12 6 views
1

Ich benötige ein Autocomplete-Feld in meinem Ionenprojekt. Ich habe das ionische zur automatischen Vervollständigung finden & Plugin, und ich habe den folgenden Code versucht,Ionic Autocomplete

Plugin:

bower install ionic-autocomplete 

Html:

<input type="text" ng-model="search" ionic-autocomplet="{item:countries, onSelect: ToGetData}" />

Controller:

.controller('MyCtrl', function($scope){ 
    $scope.countries = [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Antigua and Barbuda', code: 'AG'}, 
    {name: 'Bahamas', code: 'BS'}, 
    {name: 'Cambodia', code: 'KH'}, 
    {name: 'Cape Verde', code: 'CV'} 
    ]; 
    $scope.ToGetData = function(item) { 
    alert('The selected item is: '+item); 
    } 
}); 

Aber es funktioniert nicht ...

Ich habe mit dem folgenden Link auch versucht, aber nicht funktioniert,

https://github.com/guylabs/ion-autocomplete#installation

How to implement Autocomplete TextBox using AngularJS?

Kann jemand sagen, ich, wie Autocomplete mit ionic erreichen?

Jeder Hilfe wird geschätzt werden !!!

+0

irgendwelche Fehler ???? –

+0

Die Funktion "ToGetData" selbst wird nicht aufgerufen –

Antwort

0

Der korrigierte Code würde wie folgt lauten: -

In HTML: -

<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" items-method="ToGetData(query)" item-view-value-key="name" /> 

In JS: -

.controller('MyCtrl', function($scope){ 
     $scope.countries = [ 
     {name: 'Afghanistan', code: 'AF'}, 
     {name: 'Antigua and Barbuda', code: 'AG'}, 
     {name: 'Bahamas', code: 'BS'}, 
     {name: 'Cambodia', code: 'KH'}, 
     {name: 'Cape Verde', code: 'CV'} 
     ]; 

// Called everytime the user types something in the search box with the query passed as an argument 
     $scope.ToGetData = function(query) { 
      if(query) { 
      // Filter data based on the query passed 
      return item; 
      } 
      else { 
      return $scope.countries; // Display all of the data initially 
      } 
     } 
    }); 

Hoffnung, das hilft! Lass mich wissen, ob es immer noch nicht funktioniert.