Angularjs jquery UI Autovervollständigung

Question

Ich versuche, Autovervollständigung von jquery in einer Angular-Direktive zu implementieren. Die Daten, die ich für die Quelle erhalte, stammen aus der Websocket-Antwort. Es funktioniert nicht und ich denke, Antwortverzögerung verursacht hier das Problem.

Ich freue mich, wenn jemand etwas Licht auf Code unten beleuchten könnte. Gibt es eine elegante Technik, um dies mit einer Art von Anfrage/Antwort oder Versprechen zu erreichen?

app.directive('autoComplete', function($rootScope, locationAutoCompleteService, $timeout, $http, programLocationModel) { 
    return { 
     restrict: 'A', 

     scope: { 

      serviceType: '@serviceType' 
     }, 

     link: function(scope, elem, attr, ctrl) { 

      var autoItem = []; 

      scope.change = function() { 

       locationAutoCompleteService.unSubscribe(); 

       var service = locationAutoCompleteService.getServiceDefinition(); 

       service.filters.pattern = scope.inputVal; 

       locationAutoCompleteService.subscribe(); 

      }; 

      scope.$on('myData', function(event, message){ 

       if (message !== null && message.results !== null) { 

        autoItem = []; 

        for (var i = 0; i < message.results.length; i++) { 

         autoItem.push({ label: message.results[i].name, id: message.results[i].id }); 
        } 

       } 

      }); 

      elem.autocomplete({ 

       source: autoItem, 
       select: function(event, ui) { 

        $timeout(function() { 

         elem.trigger('input'); 

        }, 0); 

       } 
      }); 
     } 
    }; 
}); 

Answer 1

Sie können immer die Arbeit nutzen diese Leute getan haben: http://angular-ui.github.io/bootstrap

-Blättern unten

Hier ist ein Plunkr typeahead-: http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview

Hier einige Markup:

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl"> 
    <pre>Model: {{selected| json}}</pre> 
    <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> 
</div> 

JS

function TypeaheadCtrl($scope) { 

    $scope.selected = undefined; 
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; 
} 

aktualisieren

Es scheint, wie ich auf dem falschen Problem wurde konzentriert. Versuchen Sie, den Autocomplete-Aufruf in den Handler $on zu verschieben.

So:

app.directive('autoComplete', function($rootScope, locationAutoCompleteService, $timeout, $http, programLocationModel) { 
    return { 
     restrict: 'A', 
     scope: { 
      serviceType: '@serviceType' 
     }, 
     link: function(scope, elem, attr, ctrl) { 
      var autoItem = []; 
      scope.change = function() { 
       locationAutoCompleteService.unSubscribe(); 
       var service = locationAutoCompleteService.getServiceDefinition(); 
       service.filters.pattern = scope.inputVal; 
       locationAutoCompleteService.subscribe(); 
      }; 
      scope.$on('myData', function(event, message) { 
       if (message !== null && message.results !== null) { 
        autoItem = []; 
        for (var i = 0; i < message.results.length; i++) { 
         autoItem.push({ 
          label: message.results[i].name, 
          id: message.results[i].id 
         }); 
        } 
        elem.autocomplete({ 
         source: autoItem, 
         select: function(event, ui) { 
          $timeout(function() { 
           elem.trigger('input'); 
          }, 0); 
         } 
        }); 
       } 
      }); 
     } 
    }; 
});