autocomplete textbox and AngularJS

Question

I have a text box and I want to apply the autocomplete on it. I am using the following plugin:

and it works fine but as soon as I combine it with AngularJS it stops working:

I have the following code:

function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.availableTags = [],
    $scope.fullName = function() {
        /* return $scope.firstName + " " + $scope.lastName;*/
        $scope.availableTags= [
                      "ActionScript",
                      "AppleScript",
                      "Asp",
                      "BASIC",
                      "C",
                      "C++",
                      "Clojure",
                      "COBOL",
                      "ColdFusion",
                      "Erlang",
                      "Fortran",
                      "Groovy",
                      "Haskell",
                      "Java",
                      "JavaScript",
                      "Lisp",
                      "Perl",
                      "PHP",
                      "Python",
                      "Ruby",
                      "Scala",
                      "Scheme"
                    ];
        $(document).ajaxComplete(function(){
            alert('');
            $("#txt").autocomplete({
                source: $scope.availableTags,
            });

        });
        //return $scope.availableTags;
    }
}

and jfiddle link is as follow:

jfiddle

As you can see the autocomplete does not work, though without Angular it works well.

Can anyone help?

Thank you but if I understood well in that link they are using different plugin but I want to use this one and I do not know why angularjs does not work with my current code(I do not see anything wrong)? — HMdeveloper
– HMdeveloper, Commented Jan 17, 2015 at 6:09

squiroid · Accepted Answer · 2015-01-17 06:44:27Z

15

<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <script data-require="[email protected]" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
  var app=angular.module('app',[]);
  app.controller('ctrl',function($scope){
   $scope.availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $scope.complete=function(){
      console.log($scope.availableTags);
    $( "#tags" ).autocomplete({
      source: $scope.availableTags
    });
    } 
  });
  </script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" ng-keyup="complete()"/>
    </div>
  </body>

</html>

Plunker for you http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview Sorry I am not good at fiddle.

answered Jan 17, 2015 at 6:44

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HMdeveloper Over a year ago

Thanks a lot fro your answer but can you what is wrong with mine that is not working? is it becasause I did not define app?

squiroid Over a year ago

Hey sorry there are lot of errors in your code please check console of jsfiddle. Angular is not loaded properly in fiddle. And if you accept my answer please mark it :-P Thanku

Collectives™ on Stack Overflow

autocomplete textbox and AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related