Problemas con jQuery autocompletar+AngularJS

jquery-ui jquery-autocomplete

Question

Estoy usando AjgularJS en mi página y quiero agregar un campo para usar autocompletar desde jqueryui y el autocompletar no dispara la llamada ajax.

He probado el script en una página sin angular (ng-app y ng-controller) y funciona bien, pero cuando coloco el script en una página con angularjs deja de funcionar.

¿alguna idea?

jquery script:

$(function () {

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

            alert(request.term);

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

        }
    });

});

• nota interesante: cuando llamo al script en Chrome inspector, el autocompletado comienza a funcionar.
• Versiones: AngularJS: 1.0.2 - JqueryUI: 1.9.0

CONCLUSIÓN: El widget de autocompletar de jQueryUI se debe inicializar desde una directiva personalizada de AngularJS como ejemplo:

Margen

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

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

    </div>
</div>

Guion angular

<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>

Answer 1

Tal vez solo necesite hacerlo de manera "angular" ... es decir, usar una directiva para configurar sus elementos DOM y realizar enlaces de eventos, usar un servicio para obtener sus datos y usar un controlador para hacer su negocio Lógica ... todo mientras se aprovecha la bondad de inyección de dependencia que es Angular ...

Un servicio para obtener tus datos de autocompletado ...

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

una directiva para realizar el trabajo de configuración del complemento de autocompletado.

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

Y usándolo en su marca ... observe el modelo ng para establecer un valor en el alcance $ con lo que seleccione.

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

Eso es solo lo básico, pero espero que eso ayude.

Answer 2

Tuve que hacer un poco más de trabajo para que esto funcionara utilizando un servicio $ http.

El servicio:

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

La directiva:

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

El html:

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