Jquery autocomplete not working

Question

My autocomplete is not working , i have alerted the response from ajax , it is json

 <script src="../jquery.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript">
    </script>
 $(document).ready(function(){
            var arr=[];
            $.ajax({
               type:'POST',
               url:'showtags.php',
               success:function(res)
               {
                  arr = $.parseJSON( res );
                  $('#tags').autocomplete({
                     source:arr
                  });
               }
            });

        });

I also found out that the arr is not an array as a normal array in javascript displayed all its elements when we do alert(arr) , but it says [Object object].

the res variable is = {"1":"hello","72":"call you","73":"this is me"}

the arr variable is = object{1="hello",72="call you",73="this is me"}

Answer 1

you are getting an object in your response, but you need an array for autocomlete to work. if you can access your backend, you have to fix it there, otherwise, you have to iterate your AJAX' return value and try to convert the object into an array.

---

Javascript doesn't understand the concept of PHPs associative arrays, and as JSON is JAVASCRIPT object notation, JSON doesn't understand them either. You have to make sure that your array is a simple array ( i.e. no forced array keys) when you use PHPs json_encode, or you will get an object in JSON instead of an array.

$a = array("1"=>"one", "3"=>"three");
echo json_encode($a)
// {"1":"one", "3"=>"three"}
// doesn't work for jQuery.autocomplete

$b = array(array("id"=>"1", "label"=>"one"), array("id"=>"3","label"=>"three"));
echo json_encode($b);
// [{"id":1, "label":"one"}, {"id":3, "label":"three"}]
// works for jQuery.autocomplete

Answer 2

You have to call the constructor of autocomplete in the success handler of your ajax call, like this:

 $(document).ready(function(){
            var arr=[];
            $.ajax({
               type:'POST',
               url:'showtags.php',
               success:function(res)
               {
                  arr = $.parseJSON( res );
                  $('#tags').autocomplete({
                         source:arr
                   });
               }
            });

        });

The way you are doing it, the constructor will be called immediately after your request is sent (before the response arrives and your array is populated), so the autocompletion will be initialised with an empty array.

Answer 3

You are experiencing call-by-value (or at least the way it is used by javascript).

Consider the following example:

var arr = [];
var x = {x: arr};
arr = [0,1];
console.log(x.x); // Outputs []

What happens here?
When you create your object x the reference of arr is passed call-by-value to the object constructor. So x.x is now pointing at our initial empty array.
When you now set arr to another value you just overwrite our reference to our initial array with the reference to new array. So arr is now pointing to our new array containing [0,1].

You could solve this by using apply (given that res is an array).

arr.push.apply(arr, $.parseJSON( res ));

arr now equals to res (given that arr was empty before)

EDIT: As the question was edited since my answer. Here the original code.

$(document).ready(function(){
        var arr=[];
        $.ajax({
           type:'POST',
           url:'showtags.php',
           success:function(res)
           {
              arr = $.parseJSON( res );
           }
        });
        $('#tags').autocomplete({
          source:arr
        });
    });

Answer 4

you have to put the constructor of autocomplete after the ajax call.
Like this:

$(document).ready(function(){
    var arr=[];
    $.ajax({
        type:'POST',
        url:'showtags.php',
        success:function(res)
        {
            arr = $.parseJSON( res );
            $('#tags').autocomplete({
                source:arr
            });
        }
    });
});