Autocomplete In Jquery does not work

Question

Then I have a list of provinces that recovery from db and turn into json. All'autocomplete I serve this file province.php that return a list of all the provinces. The file does is show all the provinces with the simple query SELECT * FROM provinces.

I was forced to choose this path so as to put this cached result and avoid No database queries only to the choice of the province.

The real problem is what?

That autocomplete works in his own way or does see the list of all the provinces province.php extracted from the file, but it is not able to filter the results.

So if I write MILA ... should show only the provinces that boarders with MILA .. because instead always gives me the entire list?

<script>
  $(function() {
    $( "#province" ).autocomplete({
      source: 'province.php'
    });
  });
</script>

The file province.php returns something like this:

{"0":{"id":"1","label":"Milano","value":"Milano"},"1":{"id":"2","label":"Cagliari","value":"Cagliari"},"2":{"id":"3","label":"Messina","value":"Messina"},"5":{"id":"4","label":"Roma","value":"Roma"},"6":{"id":"5","label":"Venezia","value":"Venezia"}}

As if I do this instead works:

<script>
  $(function() {
    var province = [
      { label: "milano", value: "milano", id: 1 },
      { label: "Cagliari", value: "Cagliari", id: 2 },
      { label: "Messina", value: "Messina", id: 3 },
      { label: "Roma", value: "Roma", id: 4 },
      { label: "Catania", value: "Catania", id: 5 },
      { label: "Venezia", value: "Venezia", id: 6 }
    ];
    $( "#tags" ).autocomplete({
      source: province
    });
  });
  </script>

why?

Answer 1

You could try using for..in to parse your object into the [] you need, like this :

// The following object masquerades as an array.
var fakeArray = {
    "0": {
        "id": "1",
            "label": "Milano",
            "value": "Milano"
    },
        "1": {
        "id": "2",
            "label": "Cagliari",
            "value": "Cagliari"
    },
        "2": {
        "id": "3",
            "label": "Messina",
            "value": "Messina"
    },
        "5": {
        "id": "4",
            "label": "Roma",
            "value": "Roma"
    },
        "6": {
        "id": "5",
            "label": "Venezia",
            "value": "Venezia"
    }
}

var realArray = [];

for (var i in fakeArray) {
    realArray.push(fakeArray[i]);
}

Now realArray will contain the data in the form you need :

[
    {
        "id": "1",
        "label": "Milano",
        "value": "Milano"
    },
    {
        "id": "2",
        "label": "Cagliari",
        "value": "Cagliari"
    },
    {
        "id": "3",
        "label": "Messina",
        "value": "Messina"
    },
    {
        "id": "4",
        "label": "Roma",
        "value": "Roma"
    },
    {
        "id": "5",
        "label": "Venezia",
        "value": "Venezia"
    }
]

Now, all you need to do is,

$("#test").autocomplete({
    source: realArray
})

Assuming #test is the id of your text box.

Demo : http://jsfiddle.net/hungerpain/rNzpg/1/

Edit : If you're data is coming from a php file, use getJSON to get the data first :

$.getJSON('province.php').done(function(result) {
   fakeArray = result ; 

   var realArray = [];

   for (var i in fakeArray) {
        realArray.push(fakeArray[i]);
   }

    $("#test").autocomplete({
      source: realArray
    });  

});

PHP : To make your looping in code itself, your PHP code must construct an array like this :

 var $array = array();
 foreach ($province as $provincia) { 
   array_push($array, $province);
 } 

 echo json_encode($array) 

Be sure to have this : header('Content-type: application/json');

Then your JS could look very simple :

 $( "#tags" ).autocomplete({
      source: "province.php"
 });

Hope this helps!

Answer 2

Try

$(function() {
    $("#province").autocomplete({
        source : function(request, response) {
            $.getJSON('province.php').done(function(result) {
                var regex = new RegExp(request.term, 'i');

                var array = $.map(result, function(item, idx) {
                    if(!regex.test(item.label)){
                        return;
                    }

                    return {
                        label : item.label,
                        value : item.value,
                        id : item.id
                    }
                });
                response(array)
            });
        }
    });
});