Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jquery autocomplete in AngularJs not working on first click

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 697
    Comment on it

    Hi,

    I was using jquery autocomplete functionality in angularJs using directive. Whenever I tried to load static data it was working fine, but when I loaded data from server side the first click was not working. 

    I was using code something like:

    $("#suggestion").autocomplete({ source: $scope.data });

    where $scope.data contains the data from server. After doing lot of search i found the issue. When using angular values cannot be assign like this, it should be assigned as a key value pair, like:

    value: item.key+"; "+item.value

    Complete code:

    app.directive('autoComplete', ['$http', function($http) {
      var data = [];
      return function (scope, element, attrs) {
        element.autocomplete({
          minLength:1,
          source:function (request, response) {
            data = [];
            var url = '/source/getData/'+searchKey;
            $http.get(url).success( function(data) {         
             response($.map(data.city, function(item) {
                return {
                  value: item.key+"; "+item.value
                };
              }));
            });
          }
        });
      }
    }]);
    

    Here minLength decides after which number of character autocomplete will start appearing. 

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: