DBの値を取得した後、jQueryのautocompleteを使いサジェスト機能を作りたい。

Question

以下の手順で、進めているのですが、図のように表示されません。

DBから値を取得し、Jqueryのautocompleteを利用してサジェスト機能を作りたいのですが、うまくいきません。
autocompleteのパラメーターsource:は配列ということで、配列データを作るようにしています。
javascriptに直接記述する、リテラルの配列データでは、作れたのですが、
DBから取得した配列データを、javascriptの配列に変換して使用すると機能しません。
どのようにすればよいか、ご教授いただけないでしょうか？
よろしくお願いします。

//phpの配列データ
$arrayName

//$arrayNameの中身
Array
(
[1] => 中村
[2] => 佐藤
[3] => 田中
)

PHPの配列をjavascriptの配列にするために、
オブジェクトに変換してから、配列へ変換しています。

//オブジェクトに変換
$jsonArrayName = json_encode($arrayName);

//配列に変換
<script type="text/javascript">
var arrayName = JSON.parse('<?php echo $jsonArrayName; ?>');
</script>

//オートコンプリート機能
$(function() {
     //リテラルの配列は機能する
	//var arrayName = ['中村', '佐藤', '田中'];
	$('#keyword').autocomplete({
		source: arrayName
	})
});

Answer 1

たぶん、単に読み込む順番ではないかなと思います。
JavaScriptは外部ファイルですか？ならば、

<script>
var arrayName = JSON.parse('<?php echo $jsonArrayName; ?>');
</script>

の後に

<script src="***.js"></script>

で読み込めば動くと思います。

Answer 2

JSON変換はデリケートですので、arrayNameに本当に配列データが入っているのかをまず確認してください。

<script>
var arrayName = JSON.parse('<?php echo $jsonArrayName; ?>');
console.log(arrayName);
</script>

これで確認できるはずです。
あと、文字列からわざわざ戻さずとも、

<script>
var arrayName = <?php echo $jsonArrayName; ?>;
console.log(arrayName);
</script>

これでうまく行くような気もします。

Answer 3

参考URL
http://d.hatena.ne.jp/IT7C/20151225/1450970575

こちらで変換して
作れました。

var arr = Object.keys(arrayName).map(function (key) {return arrayName[key]});