web-dev-qa-db-fra.com

Problèmes avec JQuery Autocomplete + Angularjs

j'utilise Ajgularjs sur ma page et j'aimerais ajouter un champ pour utiliser la section automatique à partir de JQueryui et l'autocomplete ne tire pas l'appel Ajax.

j'ai testé le script sur une page sans angular (NG-APP et NG-Controller) et cela fonctionne bien, mais lorsque je mets le script sur une page avec angularjs, il cesse de fonctionner.

une idée?

jQUERY Script:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

        },
        minLength: 3,
        select: function (event, ui) {

        }
    });

});
  • remarque intéressante: lorsque j'appelle le script sur Chrome inspecteur, l'autocomplete commence à fonctionner !!!
  • Versions: AngularJs: 1.0.2 - Jqueryui: 1.9.0

Conclusion : Le widget autocomplete de JQueryui doit être initialisé de l'intérieur d'une directive personnalisée de Angularjs comme exemple:

Markup

<div ng-app="TestApp">
    <h2>index</h2>
    <div ng-controller="TestCtrl">

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

    </div>
</div>

Script angulaire

<script type="text/javascript">

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

    function TestCtrl($scope) { }

    app.directive('autoComplete', function () {
        return function postLink(scope, iElement, iAttrs) {

            $(function () {
                $(iElement).autocomplete({
                    source: function (req, resp) {
                        alert(req.term);
                    }
                });
            });

        }
    });

</script>
jqueryjquery-uiangularjsjquery-autocomplete
19
Flavio Oliveira

Peut-être que vous avez juste besoin de le faire de manière "angulaire" ... c'est-à-dire d'utiliser une directive pour configurer vos éléments DOM et faire des liaisons d'événement, utilisez un service pour obtenir vos données et utiliser un contrôleur pour faire votre entreprise. Logic ... tout en exploitant la bonté d'injection de dépendance qui est angulaire ...

Un service pour obtenir vos données autocompresses ...

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {
            //this is where you'd set up your source... could be an external source, I suppose. 'something.php'
            return ['apples', 'oranges', 'bananas'];
        }
    }
}]);

une directive pour faire le travail de la configuration du plugin autocomplete.

app.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
                    // elem is a jquery lite object if jquery is not present,
                    // but with jquery and jquery ui, it will be a full jquery object.
            elem.autocomplete({
                source: autoCompleteDataService.getSource(), //from your service
                minLength: 2
            });
        }
    };
});

Et l'utiliser dans votre balisage ... Notez le modèle NG pour définir une valeur sur la portée $ avec ce que vous sélectionnez.

<div ng-controller="Ctrl1">
    <input type="text" ng-model="foo" auto-complete/>
    Foo = {{foo}}
</div>

Ce n'est que les bases, mais j'espère que cela aide.

36
Ben Lesh

Je devais faire un peu plus de travail pour obtenir ce travail en utilisant un service HTTP $.

Le service:

app.factory("AutoCompleteService", ["$http", function ($http) {
    return {
        search: function (term) {
            return $http.get("http://YourServiceUrl.com/" + term).then(function (response) {
                return response.data;
            });
        }
    };
}]);

La directive:

app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) {
    return {
        restrict: "A",
        link: function (scope, elem, attr, ctrl) {
            elem.autocomplete({
                source: function (searchTerm, response) {
                    AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                        response($.map(autocompleteResults, function (autocompleteResult) {
                            return {
                                label: autocompleteResult.YourDisplayProperty,
                                value: autocompleteResult 
                            }
                        }))
                    });
                },
                minLength: 3,
                select: function (event, selectedItem) {
                    // Do something with the selected item, e.g. 
                    scope.yourObject= selectedItem.item.value;
                    scope.$apply();
                    event.preventDefault();
                }
            });
        }
    };
}]);

Le HTML:

<input ng-model="YourObject" autocomplete />
14
Jason