无法在angularjs使用jquery jquery.autocomplete.js [英] Unable to use jquery jquery.autocomplete.js in angularjs

问题描述

我试图让输入文字搜索栏自动完成与angularjs jquery.autocomplete.js帮助。但它不是working.I检查萤火控制台没有error.Please帮助我。

code

  app.directive（自动完成，功能（autoCompleteDataService）{
    返回{
            限制：'A'，
           链接：功能（范围，ELEM，ATTR，CTRL）{        elem.autocompleteArray（{
            来源：autoCompleteDataService.getSource（）
            的minLength：2
        }）;
    }
};
 

}）;

  app.factory（'autoCompleteDataService'，[功能（）{
    返回{
        的getSource：功能（）{        返回['苹果'，'桔子'，'香蕉'];
       }
     }
 }]）;
 

HTML code

 ＆LT;输入类型=文字自动完成/＆GT;
 

解决方案

你有几个语法错误，缺少一些支撑，命名，最后，你忘了包围与jQuery的元素，在这里任何情况下的使用JQuery工作示例UI自动完成。

示例：

  app.factory（'autoCompleteDataService'，[功能（）{
    返回{
        的getSource：功能（）{        返回['苹果'，'桔子'，'香蕉'];
       }
     }
 }]）; app.directive（自动完成，功能（autoCompleteDataService）{
    返回{
            限制：'A'，
           链接：功能（范围，ELEM，ATTR，CTRL）{        $（ELEM）.autocomplete（{
            来源：autoCompleteDataService.getSource（）
            的minLength：2
        }）;
    }
    }}）
 

活生生的例子： http://jsfiddle.net/choroshin/gKcMP/

更新：

工作与jQuery 自动完成插件（仅适用于jQuery的版本和LT例子; 1.9）

  VAR应用= angular.module（'应用'，[]）;app.factory（'autoCompleteDataService'，[功能（）{
    返回{
        的getSource：功能（）{        返回['苹果'，'桔子'，'香蕉'];
       }
     }
 }]）; app.directive（自动完成，功能（autoCompleteDataService）{
    返回{
            限制：'A'，
           链接：功能（范围，ELEM，ATTR，CTRL）{        $（ELEM）.autocompleteArray（autoCompleteDataService.getSource（）{
             的minLength：2
        }）;
    }
    }}）
 

活生生的例子： http://jsfiddle.net/choroshin/gKcMP/2/

I am trying to make autocomplete on input Text search field with help of jquery.autocomplete.js in angularjs. But it is not working.I checked firebug console there is no error.Please help me.

code

 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 code

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

解决方案

you have couple of syntax mistakes, some missing braces, naming and lastly, you forgot to surround the element with JQuery, in any case here's a working example using JQuery ui autocomplete .

Example:

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
        });
    }
    }})

Live example: http://jsfiddle.net/choroshin/gKcMP/

Update:

Working example with JQuery autocomplete plugin (only works with jquery version <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
        });
    }
    }})

Live Example: http://jsfiddle.net/choroshin/gKcMP/2/

这篇关于无法在angularjs使用jquery jquery.autocomplete.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！