JSON 数据未出现在 jquery ui 自动完成中

Question

我正在使用 jquery ui 自动完成功能来显示来自数据库的过滤数据。使用浏览器的网络实用程序，我确认服务器正确返回 JSON 数据。但是自动完成菜单中没有显示任何内容，查看页面的源代码我得到 "No search results"。如果我使用浏览器网络实用程序的响应主体作为 jquery ui 自动完成的来源，一切正常。非常感谢任何帮助。

HTML

<div class="col-lg-4 col-sm-4 col-xs-12 pull-right ui-widget">
  <div class="input-group">
    <input class="form-control" name="afm" id="autocomplete" />
    <span class="input-group-addon"><i class="fa fa-search"></i></span>
  </div>
</div>

javascript

$( "#autocomplete" ).autocomplete({
    delay:500,
    minLength:2,
    source: "getAFMJSON.php",
    select: function( event, ui ) {
        location.href="userpage.php?idx=22&q="+ui.item.id;
    }
});

PHP

<?php
if (!defined('DP_BASE_DIR')) {
    require_once("base.php");
}
// prevent direct access
$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
if(!$isAjax) {
    $user_error = 'Access denied - not an AJAX request...';
    trigger_error($user_error, E_USER_ERROR);
}

require_once(DP_BASE_DIR."/models/config.php");

// get what user typed in autocomplete input
$term = sanitize(trim($_GET['term']));

$a_json = array();
$a_json_row = array();

$a_json_invalid = array(array("id" => "#", "value" => $term, "label" => "Only letters and digits are permitted..."));
$json_invalid = json_encode($a_json_invalid);

// allow space, any unicode letter and digit, underscore and dash
if(!preg_match('/^[0-9]*$/', $term) || $term == 0) {
    print $json_invalid;
    exit;
}

global $db;

$sql="SELECT `company_afm`, `company_id` FROM `data_companies` WHERE `company_afm` LIKE '".$db->sql_escape($term)."%'";
$result = $db->sql_query($sql);
while($row = $db->sql_fetchrow($result)) {
    $a_json_row["label"] = $row['company_afm'];
    $a_json_row["id"] = $row['company_id'];
    array_push($a_json, $a_json_row);
}

$json = json_encode($a_json);
header('Content-Type: application/json');
print $json;
?>

在自动完成输入中键入“998”时，浏览器网络实用程序中的 JSON 响应类似于：[{"label":"998916950","value":"53"}]

请帮忙！！

Answer 1

您的来源是一个名为 source: "getAFMJSON.php" 的字符串这需要是 json 值。由于您使用 ajax 执行此操作，因此您应该使用执行 ajax 请求和 returns 结果数组的函数作为您的来源。

Answer 2

经过多方查找，我发现问题与某些编辑器将脚本编码为UTF-8 的方式有关。事实上，当我使用 Codeanywhere 编辑一些脚本时，编辑器在这些脚本的最开头分配了 Byte Order Mark (BOM)。当 JSON 由这些脚本生成或嵌入到使用 BOM 以 UTF-8 编码的脚本中时，它包含 BOM 隐藏字符，这使其无效，因此对 JQueryUI 自动完成无用。我使用 Notepad++ 将 JSON 生成脚本和容器脚本转换为没有 BOM 的 UTF-8，但我没有清理所有内容。幸运的是，我找到了 emrahgunduz/BOMCleaner，它检查了我的应用程序中包含的所有脚本并将它们从 BOM 字符中清除。

JSON 数据未出现在 jquery ui 自动完成中

JSON data do not appear in jquery ui autocomplete

php

json

jquery-ui

autocomplete

byte-order-mark