jQuery + PHP自动完成 [英] jQuery + PHP Autocomplete

问题描述

由于另一个依赖项，我最近将jQuery从1.8.x升级到了1.11.3，现在我的自动完成功能已损坏.我整天都在搜索此网站，Google等.因此无法提供答案.jQuery-UI版本是1.9.2.

I recently upgraded jQuery from 1.8.x to 1.11.3 because of another dependency, and my autocomplete is now broken. I've been searching this site, Google, etc.. all day and cannot come up with the answer. jQuery-UI version is 1.9.2.

首先，我有一个PHP文件(autocomplete.php)，该文件查询MySQL数据库并返回清单信息:

To start, I have a PHP file (autocomplete.php) that queries a MySQL database and returns inventory information:

<?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);
}
?>

到目前为止，一切都很好.我可以检查结果是否以正确的格式返回.

So far so good. I can check that the results are returned in the proper format.

在我要自动完成的页面上，一旦从自动完成结果中选择了item_no，就会从结果中填充item_desc_1和item_desc_2:

On the page where I want the autocomplete, once the item_no is selected from the autocomplete results, item_desc_1 and item_desc_2 are populated from the results:

<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个元素并填充字段.

At the very bottom of the page is my script, which should return the 3 elements from the JSON results and populate the fields.

$(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;
    }
   });
});

我一直收到Uncaught TypeError:无法读取null的属性"split"(Chrome)或TypeError:elem为null(Firebug).

I keep getting either Uncaught TypeError: Cannot read property 'split' of null (Chrome) or TypeError: elem is null (Firebug).

要进行故障排除，我更新了表，以使表中不能有NULL值-如果任一项目说明字段中的值为NULL，则返回未找到说明".item_no是主键，不允许为NULL.

To troubleshoot, I updated the table so there can't be NULL values in the table - if a value is NULL in either item description field then 'No Description Found' is returned. item_no is a primary key and NULL is not allowed.

我想念什么?

推荐答案

问题最终是存储在数据库中的非ASCII字符.一旦删除它们，一切都会按预期进行.谢谢大家的帮助

The issue ended up being non-ascii characters stored in the database. Once I removed them, everything worked as expected. Thanks for everyone's help

这篇关于jQuery + PHP自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！