Question

我试图在angularjs中使用jquery.autocomplete.js在输入文本搜索字段上进行自动完成。但它没有用。我检查了firebug控制台没有错误。请帮助我。

代码

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        elem.autocompleteArray({
            source: autoCompleteDataService.getSource(), 
            minLength: 2
        });
    }
};

}）;

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

Html代码

 <input type="text" auto-complete/>

Answer 1

你有几个语法错误，一些缺少大括号，命名，最后，你忘了用JQuery包围元素，无论如何这是一个使用JQuery ui自动完成的工作示例。

示例：

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        $(elem).autocomplete({
            source: autoCompleteDataService.getSource(), 
            minLength: 2
        });
    }
    }})

实例：http://jsfiddle.net/choroshin/gKcMP/

<强>更新

使用JQuery autocomplete插件的工作示例（仅适用于jquery版本＆lt; 1.9）

var app=angular.module('App', []);

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        $(elem).autocompleteArray(autoCompleteDataService.getSource(),{
             minLength: 2
        });
    }
    }})

直播示例：http://jsfiddle.net/choroshin/gKcMP/2/

无法在angularjs中使用jquery jquery.autocomplete.js

1 个答案: