Question

更新我已经意识到下面的代码正在使用jQuery-UI，并且在我的要求中我假设没有任何第三方依赖项。

所以重新解释一下我的问题，如何更改或转换下面的代码只使用原生angularjs而不是使用jQuery-ui？

对不起，如果这与@Roberto Linares＆amp; @risto

我已经搜索并找到了这个指令，我认为它的轻量级按预期工作，如果你转到下面的jsfiddle，但是只要我将angularjs的版本更改为1.2x（目前在我的项目中使用）获取这个错误：

TypeError: undefined is not a function
    at http://localhost:54893/scripts/directives/auto-complete.js:3:19
iElement.autocomplete({  <<<<ERROR

这是我的代码：

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


<input auto-complete ui-items="names" ng-model="selected">
    selected = {{selected}}

http://jsfiddle.net/sebmade/swfjT/light/ 我也注意到在jsfiddle中使用Jquery UI是依赖于这个指令吗？如果你知道任何轻量级指令，请告诉我..

AngularJS指令1.2版本： http://jsfiddle.net/abuhamzah/zx8twm2w/（不工作）

感谢。

Answer 1

无需创建指令，只需使用下面的代码即可。

HTML：

<input type="text" class="form-control autocomplete" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

在您的控制器中添加此代码：

$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'];

工作示例：https://jsfiddle.net/0y3ntj4x/23/

Answer 2

您可以使用以下概念来使用此功能：

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                Country Name <input type="text" class="form-control autocomplete" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
            </div>
        </form>
    </div>
</div>



 angular.module('myApp', ['ui.bootstrap'])
        .controller("mainCtrl", function ($scope) {
      //  $scope.selected = {id:'0',address:'Type 3 Letters'};
       $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'];
    });

https://jsfiddle.net/0y3ntj4x/23/

Answer 3

更新：此解决方案基于海报的原始问题，使用jquery ui。请参阅HTML5解决方案的其他答案

更高版本的angular抱怨DefaultCtrl未定义。我修好了它：

var app = angular.module('MyModule', []);
app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
}).controller('DefaultCtrl', function ($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
});

这是fiddle。

使用纯angularjs实现自动完成，没有任何依赖

3 个答案: