-1

I'm using jquery-autocomplete plugin to lookup into an array from suggestions/autocomplete.

ref: https://github.com/devbridge/jQuery-Autocomplete

PHP (1)

$stmt = $dbh->query("SELECT tag_name FROM tags");
$tags = array();
$tags = $stmt->fetchAll(PDO::FETCH_COLUMN, 0);
echo json_encode($tags);
/*
    var_dump($tags);
    "array(6) {
      [0]=>
      string(1) "tag1"
      [1]=>
      string(2) "tag2"
      [2]=>
      string(3) "tag3"
      [3]=>
      string(4) "tag4"
    }
    "
*/

PHP (2)

echo ('["tag1","tag2","tag3","tag4"]');

PHP (3)

$a = ["tag1","tag2","tag3","tag4"];
echo json_encode($a);

JavaScript

$.ajaxSetup({ cache: false, async: false });

var myTags = [];
$.get( '/action.php', {action: 'get_tags'}).done( function(data){
  console.log(data);
  myTags = eval(data);
  //myTags = JSON.parse(data);
});

$('#tagInput').autocomplete({
  lookup: myTags
});

Both PHP v1 and PHP v2 will provide a proper array console.log(data). However, the array coming from PHP v1 json_encode($tags) won't work with the plugin (it simply doesn't recognize the array). While PHP v2 array echo ('["tag1","tag2","tag3","tag4"]'); works just fine. PHP v3 also won't work.

What is wrong in this code? Why json_encode() array isn't being recognized?

Azevedo
  • 2,059
  • 6
  • 34
  • 52
  • What do you mean `PHP v1` and `PHP v2`? – Ranjith Mar 02 '15 at 16:22
  • 3
    None of those solutions should work, since you are calling `$('#tagInput').autocomplete({...})` **before** the Ajax response was received. See [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/q/23667086/218196) – Felix Kling Mar 02 '15 at 16:22
  • @Ranjith I meant that both codes proudce the same output array but v2 works and v1 doesn't – Azevedo Mar 02 '15 at 16:27
  • To continue on @FelixKling 's comment: You need to move the `$('#tagInput').autocomplete({...})` into the `$.get().done` and make the input accessible when the ajax request is done. – Mouser Mar 02 '15 at 16:27
  • it doesn't matter where I put the `$('#tagInput').autocomplete({...})` code. the problem stills. V2 works. V1 doesn't. – Azevedo Mar 02 '15 at 16:30
  • @Azevedo: Well, there might be other problems, but if you don't put the call inside the callback, it's guaranteed to *not* work. – Felix Kling Mar 02 '15 at 16:31
  • @FelixKling: you are missing the point of this question. V2 works . V1 doesn't. I have already put the `$('#tagInput').autocomplete({...})` inside the call back. THE RESULT STILLS. – Azevedo Mar 02 '15 at 16:32
  • @Azevedo: I think you are missing the point of my comment (where I acknowledged that just moving the call doesn't necessarily solve the whole issue). – Felix Kling Mar 02 '15 at 16:35
  • What is the output of `console.log` in the first case? – Felix Kling Mar 02 '15 at 16:36
  • V1 does not echo a JSON but JSON and a dump, wich is gibberish to your Javascript. Just compare the echo'ed output in your browser and maybe even run it through some JSON validator (plenty of them online). – ToBe Mar 02 '15 at 16:39
  • In all 3 cases `console.log()`: "["tag1","tag2","tag3","tag4"]" – Azevedo Mar 02 '15 at 16:39
  • Did you intend to write JScript? JScript ≠ JavaScript. – idmean Mar 02 '15 at 16:39
  • Call your PHP in your browser and compare the results. Simple as that! – ToBe Mar 02 '15 at 16:40
  • @ToBe: all the same all the same all the same everywhere: `"["tag1","tag2","tag3","tag4"]"` – Azevedo Mar 02 '15 at 16:42
  • It can not be the same or your Script would work same. There HAS to be a difference. Or, if it realy is the same, than the cause of your error can not be related to the contents of your JSON. – ToBe Mar 02 '15 at 16:43
  • @ToBe. no difference... `alert myTags[3]` will produce "tag4" in all cases. so the array is there. but the plugin only recognizes the array coming from V2 – Azevedo Mar 02 '15 at 16:45
  • Than it's not the json, that is generating the errors. How exactly did you determine the error? What was the faulty behaviour or the error you got? – ToBe Mar 02 '15 at 16:46
  • the plugin should load the suggestions from the array and display them. it only works with PHP code V2 (in this question). in others it won't produce errors and also won't work. – Azevedo Mar 02 '15 at 16:53

2 Answers2

1

The plugin won't 'accept' (probably a bug) the array if the array contains a string of single char among it's entries:

['tag1','a','tag2','tag3'] // won't work
['tag1','tag2','tag3'] // works

So, PHP json_encode is all ok.

Azevedo
  • 2,059
  • 6
  • 34
  • 52
0

Your v2 works because you are using a series of strings for the suggestions, like this:

{
  "query": "Unit",
  "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
}

When you are going to provide data a direct json_encode of an array of strings wont work. You need a special structure:

{
  // Query is not required as of version 1.2.5
  "query": "Unit",
  "suggestions": [
      { "value": "United Arab Emirates", "data": "AE" },
      { "value": "United Kingdom",       "data": "UK" },
      { "value": "United States",        "data": "US" }
  ]
}
Francisco Félix
  • 2,413
  • 13
  • 16