jquery ui autocomplete : data source from a javascript object

by bryiantan

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
     
     <div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>

JavaScript

$(function(){
     var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
    
var my_data = {
  "status": "ok",
  "count": 4,
  "data": [
    {
      "nickname": "Deadly",
      "id": 501689800
    },
    {
      "nickname": "Deadly00",
      "id": 517095041
    },
    {
      "nickname": "Deadly001",
      "id": 504471830
    },
    {
      "nickname": "DeadLy01",
      "id": 500877077
    }
  ]
};

 function handleAutocomplete(term) {
        // use 'term' for custom filtering etc.
        var options = $.grep(my_data.data, function(e) {
           // return e.nickname.startsWith(term);
           return e.nickname.indexOf(term) >=0;
        });
        return options;
}
    
$( "#tags" ).autocomplete({
//source: availableTags
    source: function(request, response) {
                    var term = request.term;
                     var data = handleAutocomplete(term); 
                   //  alert(term);
console.log(data);
response(data);                    
                    /*if (term in cache) {
                        response(cache[term]);
                        return;
                    }*/
            /*$.getJSON("path/to/heaven/" + term, function(data) {
                cache[term] = data;
                response(data);
            });*/
               
        }
});
});