Problem with autocomplete jQueriUI this.source is not a function

Question

Problem with autocomplete jQueriUI this.source is not a function

Navigation

#1 by (0 votes)

0

I have a problem applying the autocomplete module of jQueryUI . It sends me an error saying "this.source is not a function". I'm working with jQuery and AngularJS . I'm using JQuery 2.1.4 , JQueryUI 1.11.2 and Angular 1.3

Here I leave the code HTML and JS

HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Base</title>
  <script src="../js/jquery-2.1.4.min.js"></script>
  <script src="../js/autocomplete-jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
  <script src="js/controller.js"></script>
  <style>
   .circular
   {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
   }

   .no-list li
   {
    list-style-type: none;
   }

   html, body
   {
    text-align: center;
    background-color: #eee;
    margin: 0px;
   }
  </style>
 </head>

 <body ng-controller="myController">
  <input type="text" my-autocomplete="posts" placeholder="Buscar repositorio">
  <ul class="no-list">
   <li ng-repeat="repo in posts" ng-hide="main_repo && main_repo != repo.name">
   <!-- <img ng-src="{{repo.owner.avatar_url}}" alt="" class="circular"> -->
    <!-- <div class="circular" style="background-image: url({{repo.owner.avatar_url}}); background-position: center; background-size: cover;"></div> -->
    <div class="circular" back-img="{{repo.owner.avatar_url}}">

    </div>
    <h1>{{repo.name}}</h1>
   </li>
  </ul>
 </body>
</html>

JS

angular.module("myApp", [])
.directive('myAutocomplete', function()
{
 return function link(scope, element, attrs)
 {
  $(element).autocomplete(
  {
   source: scope.$eval(attrs.myAutocomplete),
   select: function(ev, ui)
   {
    ev.preventDefault();
    if(ui.item)
    {
     scope.optionSelected(ui.item.value);
    }
   },
   focus: function(ev, ui)
   {
    ev.preventDefault();
    $(this).val(ui.item.label);
   }
  });
 };

 return
 {
  link: link
 };
})
.directive('backImg', function()
{
 return function(scope, element, attrs)
 {
  attrs.$observe('backImg', function(value)
  {
   element.css({
    "background": "url('"+value+"')",
    "background-size": "cover",
    "background-position": "center"
   });
  });
 };
})
.controller("myController", function($scope, $http)
{
 $http.get("https://api.github.com/users/twitter/repos")
 .success(function(data)
 {
  $scope.posts = data;

  for(var i=data.length-1;i>=0;i--)
  {
   var repo = data[i];
   $scope.posts.push(repo.name);
  }
 })
 .error(function(err)
 {
  console.log(err);
 });

 $scope.optionSelected = function(data)
 {
  $scope.apply(function()
  {
   $scope.main_repo = data;
  })
 };
});

javascript jquery angularjs jquery-ui

asked by wlajo 11.01.2017 в 21:38

source

1 answer

Application rails with remote database What is the correct way to do this FETCH to send an image?

score 0 · Answer 1

PROBLEM: easy ufff very easy that happens because the model "$ scope.posts = data;" acts as a private variable of the controller "mycontroller" since it is a callback response of a request to a twitter repository, in other words in the custom directive "myAutocomplete", the "source" is requesting a source of information but as you variable model "$ scope.posts = data;" it's private you can not access it.

SOLUTION: to convert the model variable "$ scope.posts = data;" private in a public variable and so later be able to send it to the personalized directive this variable is declared starting outside the GET callback

.controller("myController", function($scope, $http){
$scope.repositorio = [];
    $http({method:'GET',url:'https://api.github.com/users/twitter/repos'})
    .then(function(success){ 
        $scope.posts = success.data;
        for (var i = success.data.length - 1; i >= 0; i--) {
            var repo = success.data[i];
            $scope.repositorio.push(repo.name);
        }   
    }
    ,function(error){
        console.log(error);
    });
});