auto complete для угловых js не работает

Question

Я пытаюсь реализовать окно автоматического предложения для ввода текстового поля в угловых js. Я использовал ссылку со следующей скрипки http://jsfiddle.net/sebmade/swfjT/light/

то, что я пробовал, находится в передней части.

<input type="text" auto-complete ui-items="suggestionPhrase" id="ingredients" ng-model="searchString" ng-change="callSuggestion()" ng-enter="getRecipesTracknPlan()" placeholder="Type of ingredients/recipe"> 

и файл JS является

var app = angular.module('tracknplanApp', ['checklist-model','ui.bootstrap','ui.utils']);`enter code here`app.config(['$locationProvider', 
function ($locationProvider) 
{ 
    $locationProvider.html5Mode(true); }]); 

app.controller('tracknplanctrl', function ($scope, $http, $location, searchStringSelected, $modal, $filter) { 
console.log("Running Track n plan controller."); 
/*angular.element('#recipeNVariantTabs').removeClass('hidden-xs'); 
angular.element('#recipeNVariantTabs').removeClass('hidden-sm');*/ 
$scope.showVariants = false; 
var trackNPlanDate = new Date(); 
var foodSearchDate = new Date(); 
var activitySearchDate = new Date(); 
$scope.callSuggestion= function(){ 

    if ($scope.searchString){ 
     console.log("inside initializeFoodSuggestion",$scope.searchString); 
     angular.element.ajax({ 
       url: "http://dev2.slim.in:8983/solr/food/suggest", 
       data: { 
        "q": $scope.searchString, 
        "wt": "json", 
        "spellcheck": "true", 
        "spellcheck.build": "true" 
       }, 
       traditional: true, 
       cache: true, 
       async: true, 
       dataType: 'jsonp', 
       success: function (data) { 
        //and when we get the query back we 
        //stick the results in the scope 
        $scope.$apply(function() { 
         $scope.suggestionPhrase = data.spellcheck.suggestions[1].suggestion; 
         console.log("suggestion from solr is ",$scope.suggestionPhrase) 
        }); 
       }, 
       jsonp: 'json.wrf' 
      }); 

}} 

app.directive('autoComplete', function() { 
return function(scope, iElement, iAttrs) { 
     iElement.autocomplete({ 
      source: $scope.suggestionPhrase, 
      select: function() { 
       $timeout(function() { 
        iElement.trigger('input'); 
       }, 0); 
      } 
     }); 
};}); 

Я не знаю, где мой код идет не так, пожалуйста, указать на ошибку в этом.

Answer 1

Я не нашел директиву работает, так что я получил Jquery автозаполнения

$("#ingredients").autocomplete({ 
      source:function(request, response) { 
      angular.element.ajax({ 
       url: "http://dev2.slim.in:8983/solr/food/suggest", 
       data: { 
        "q": $scope.searchString, 
        "wt": "json", 
        "spellcheck": "true", 
        "spellcheck.build": "true" 



       }, 
       traditional: true, 
       cache: true, 
       async: true, 
       dataType: 'jsonp', 
       success: function (data) { 
        //and when we get the query back we 
        //stick the results in the scope 
        $scope.$apply(function() { 
         $scope.suggestionPhrase = data.spellcheck.suggestions[1].suggestion; 
          console.log("before suggestprint") 


         console.log("suggestion from solr is ",$scope.suggestionPhrase) 
           response($scope.suggestionPhrase);    

        }); 
       }, 
       jsonp: 'json.wrf' 
      });} });