自動完成角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' 
      });} });