JSON 编码 PHP 数组，为 jQuery 自动完成做好准备答案

【问题标题】：JSON encode PHP array ready for jQuery AutocompleteJSON 编码 PHP 数组，为 jQuery 自动完成做好准备
【发布时间】：2013-10-02 10:24:55
【问题描述】：

我正在尝试将一个 PHP 数组传递给我的视图，然后使用该数组来填充 jQuery 自动完成功能。

foreach ($products as $product)
{               
    $productsArray[] = array('label' => $product->getName()  ,'id' => $product->getId() , 'value' => $product->getUrlSafeName());                           
}

$productsJson = json_encode($productsArray);

$productsJson 然后被传递给视图，我将它插入到 DOM 中。我使用 Twig 作为我的模板引擎：

<div id="autocompleteData">{{ productsJson }}</div>

然后是我的 jQuery：

$( document ).ready(function() {

    var autocompleteData = $('#autocompleteData').text();       

    $('#findoffice_location').autocomplete({ 
         source: autocompleteData,
         change: function (event, ui) {  } });

});

如果我使用 console.log autocompleteData，它在结构上“看起来”像一个 JSON 对象，但不是。

如果我这样做：

var autocompleteData = [{"label":"Toybox","id":1,"value":"toybox"},{"label":"Shoe","id":2,"value":"shoe"},{"label":"Eggs","id":3,"value":"eggs"}];

然后是 consolelog ，每个 autocompleteData 产品都是一个正确的 JSON 对象，并且自动完成按预期工作。

【问题讨论】：

JS中console.log(autocompleteData)的输出是什么？
[{"label":"Toybox","id":1,"value":"toybox"},{"label":"Shoe","id":2,"value ":"shoe"},{"label":"Eggs","id":3,"value":"eggs"}]
如果我按照问题中的最后一个代码块在 js 中手动输入，console.logging 会为我提供 [Object,Object,Object] 和自动完成功能。

标签： php jquery json

【解决方案1】：

需要将.text()的字符串输出转成JSON：

source: jQuery.parseJSON(autocompleteData)

当您手动输入它时，您输入的是实际的 JSON，这就是它起作用的原因。

【讨论】：

【解决方案2】：

尝试将autocompleteData 包装在对 $.parseJON 的调用中，如下所示：

$( document ).ready(function() {

    var autocompleteData = $('#autocompleteData').text();       

    $('#findoffice_location').autocomplete({ 
        source: $.parseJON(autocompleteData),
        change: function (event, ui) {  } });

});

Edit @George 打败了我。

【讨论】：