Select2.js 错误：无法读取未定义的属性“长度”答案

【问题标题】：Select2.js error: Cannot read property 'length' of undefinedSelect2.js 错误：无法读取未定义的属性“长度”
【发布时间】：2015-02-05 15:06:46
【问题描述】：

我正在使用 Select2 jquery 插件，但无法使用 json 获得结果。在浏览器中查看 json 响应时，它看起来不错。比如这样：

[{
        "id" : "50",
        "family" : "Portulacaceae "
    }, {
        "id" : "76",
        "family" : "Styracaceae "
    }, {
        "id" : "137",
        "family" : "Dipsacaceae"
    }
]

在这种情况下使用 ajax 调用的 URL 是：http://localhost/webpage/json_family.php?term=acac&_=1417999511783 但我无法在 select2 输入中得到该结果，控制台说：

未捕获的类型错误：无法读取未定义的属性“长度”

代码如下：
html

<input type="hidden" id="select2_family" name="term" style="width:30%" />

$("#select2_family").select2({
  minimumInputLength: 3,
  ajax: {
   url: "json_family.php",
   dataType: 'json',
   data: function (term) {
       return {
         term: term,
       };
   },
   results: function (data) {
     return { results: data.results };
   }

  }
});

php

$myArray = array();
if ($result = $mysqli->query("SELECT id,family FROM family WHERE family LIKE '%$term%'")) {
    $tempArray = array();
    while($row = $result->fetch_object()) {
            $tempArray = $row;
            array_push($myArray, $tempArray);
        }
    echo json_encode($myArray);
}

代码有错误吗？

【问题讨论】：

试试我更新的 php.ini 文件。对插件不够熟悉，无法直接解决这个问题，但我浏览了一些文档。希望你能尽快完成这项工作

标签： javascript php jquery json jquery-select2

【解决方案1】：

好的，我的测试服务器上有你的示例，请执行以下操作

将您的查询更改为此，更改了一些名称以提高可读性但应该是相同的功能，重要的部分是在查询中添加“AS TEXT”

$query = $mysqli->query("SELECT id, family AS text FROM family WHERE family LIKE '%$term%'"));
    while ($row = mysql_fetch_assoc($query)) {
           $return[] = $row;
         }

    echo json_encode($return);

其次，您似乎正试图从名为“results”的 json 响应中调用一个属性

如果是这种情况，您的 json 应该如下所示，请注意，由于上述更改，家庭现在是文本：

{
"results":
[
    {
        "id": "50",
        "text": "Portulacaceae "
    },
    {
        "id": "76",
        "text": "Styracaceae "
    },
    {
        "id": "137",
        "text": "Dipsacaceae"
    }
]
}

但是您的 php 不会创建属性结果，因此请更改结果函数以删除 .results 属性调用

   results: function (data) {
     return { results: data };
   }

我使用的最终代码（注意我没有转义/清理 $_GET[term] 或将其绑定到查询，建议您这样做）如果您仍然遇到问题，我可以向您发送指向我的站点示例的链接

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
</head>
<script>
$(document).ready(function () {

$("#select2_family").select2({
  minimumInputLength: 3,
  ajax: {
   url: "select2.php",
   dataType: 'json',
   data: function (term) {
       return {
         term: term,
       };
   },
   results: function (data) {
     return { results: data };
   }
  }
});

});
</script>

<input type="hidden" id="select2_family" name="term" style="width:30%" />

</html>

php

<?

/*** connection strings ***/

// get the database singleton instance
$yog = MySqlDatabase::getInstance();

// connect
try {
    $yog->connect($host, $user, $password, $db_name);
}
catch (Exception $e) {
    die($e->getMessage());
}

$term = $_GET['term'];

if (!$term){
$sub = $yog->query("SELECT id, family AS text FROM family");
} else {
$sub = $yog->query("SELECT id, family AS text FROM family where family like '%$term%'");
}

while ($row = mysql_fetch_assoc($sub)) {
       $return[] = $row;
     }

echo json_encode($return);

?>

【讨论】：

【解决方案2】：

注意：只是一个刺。正是突出的地方。

你的json没有属性结果，试试吧。

$("#select2_family").select2({
  minimumInputLength: 3,
  ajax: {
   url: "json_family.php",
   dataType: 'json',
   data: function (term) {
       return {
         term: term,
       };
   },
   results: function (data) {

     // CHANGED
     return { results: data };

   }

  }
});

更改了查询 - 看看这是否有帮助

$myArray = array();

// here
if ($result = $mysqli->query("SELECT id, family AS text FROM family WHERE family LIKE '%$term%'")) {
    $tempArray = array();
    while($row = $result->fetch_object()) {
            $tempArray = $row;
            array_push($myArray, $tempArray);
        }
    echo json_encode($myArray);
}

【讨论】：

我得到了与我在上面的答案中评论的相同的错误。旧的不再出现，但显示了这个“toUpperCase”并且没有数据了

【解决方案3】：

您需要在结果中定义text 属性

您可能需要添加formatResult 和formatSelection

$("#select2_family").select2({
    minimumInputLength: 3,
    ajax: {
        url: "json_family.php",
        dataType: 'json',
        data: function (term) {
            return {
                term: term,
            };
        },
        results: function (data) {return { results: data, text: 'family'}; },
        formatResult: function(item) { return item.family; }, 
        formatSelection: function(item) { return item.family; }
    }
});

【讨论】：

谢谢，但是当我这样做时会显示新错误：无法读取未定义的属性“toUpperCase”