Javascript jQuery+；PHP自动完成

由于另一个依赖关系，我最近将jQuery从1.8.x升级到1.11.3，我的自动完成功能现在被破坏了。我一直在搜索这个网站，谷歌等等。。一整天都不能想出答案。jQueryUI版本是1.9.2

首先，我有一个PHP文件（autocomplete.PHP），用于查询MySQL数据库并返回库存信息：

<?php
require_once 'database.php';


if ($stmt = $con->prepare("select item_no, item_desc_1, item_desc_2 FROM items")) {
$stmt->execute();

$name = array();

while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $name[] = TRIM($row['item_no']) . '|' . TRIM($row['item_desc_1']) . '|' . TRIM($row['item_desc_2']);
};
echo json_encode($name);
}
?>

到目前为止还不错。我可以检查结果是否以正确的格式返回

在我想要自动完成的页面上，一旦从自动完成结果中选择了项目编号，则将从结果中填充项目描述1和项目描述2：

<input id="item_no" name="item_no" placeholder="Enter Item#" class="form-control" tabindex="2" type="text" />
<input id="item_desc_1" name="item_desc_1" placeholder="Enter Item Desc 1" class="form-control" type="text">
<input id="item_desc_2" name="item_desc_2" placeholder="Enter Item Desc 2" class="form-control" type="text">

页面最底部是我的脚本，它应该返回JSON结果中的3个元素并填充字段

$(function() {
var availableItems = <?php include('autocomplete.php'); ?>;
$("#item_no").autocomplete({
    source: availableItems.map(function(elem){
        return { 'label': elem.split('|')[0], 'value': elem.split('|')[1],'value2': elem.split('|')[2] }
    }),
    select: function(event, ui){
        $('#item_no').val(ui.item.label);
        $('#item_desc_1').val(ui.item.value);
        $('#item_desc_2').val(ui.item.value2);
        return false;
    }
   });
});

$（函数（）{
var availableItems=；
$（“#项目编号”）。自动完成({
来源：availableItems.map（函数（elem）{
返回{“label”：elem.split（“|”）[0]，“value”：elem.split（“|”）[1]，“value2”：elem.split（“|”）[2]}
}),
选择：功能（事件、用户界面）{
$（'#项目编号'）.val（ui.item.label）；
$（'#item_desc_1'）.val（ui.item.value）；
$（'#item_desc_2'）.val（ui.item.value2）；
返回false；
}
});
});

我不断得到未捕获的TypeError:Cannotreadproperty'split'of null（Chrome）或TypeError:elem为null（Firebug）

为了进行故障排除，我更新了表，使表中不能有空值-如果任一项描述字段中的值为空，则返回“找不到描述”。item_no是主键，不允许为空

---

我遗漏了什么？

问题最终是存储在数据库中的非ascii字符。一旦我把它们取下来，一切都如期进行。谢谢大家的帮助

以前它真的像你发布的那样有效吗？对我来说，您的第二行Javascript应该是

var availableItems=''（即用引号包装PHP部分）。是的，它确实有效。我一定是无意中删除了引号，但我尝试了各种可能的方法，但仍然出现错误。如果您添加
console.log（availableItems），会怎么样在其定义之后，然后
console.log（elem）map（）
函数中返回
之前的code>？尝试
var availableItems=[]（即用括号括起来）。共有30000行，因此我不会让您对所有内容感到厌烦，但console.log（availableItems）返回“[“0-47310 | EVAX模块盖板|版本XX”，“0-47320 | EVAX分离器安装板|版本2”，“0146-046 | Cap SM 0.000033uF 50V 5%| AVX 12065A330JAT”，“0146-050 | Cap SM 0.22uF 50V 10%| AVX 12105C224KAT*A.”和console.log（elem）返回相同的数据，每个元素位于自己的行上。