Данные JSON не отображаются в автозаполнении jquery ui
Я использую автозаполнение JQuery UI для отображения отфильтрованных данных из базы данных. Используя сетевую утилиту браузера, я подтверждаю, что данные JSON возвращаются сервером правильно. Но ничего не отображается в меню автозаполнения и, глядя на источник страницы, я получаю «Нет результатов поиска». Если я использую тело ответа от сетевой утилиты браузера в качестве источника для автозаполнения 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»}]
Пожалуйста помоги!!
Решение
После долгих поисков я обнаружил, что проблема связана с тем, как некоторые редакторы кодируют сценарии в UTF-8. Фактически, когда я редактировал некоторые сценарии с помощью Codeanywhere, редактор выделил Порядок следования байтов (BOM) в самом начале этих сценариев. Когда JSON был сгенерирован этими сценариями или встроен в сценарии, закодированные в UTF-8 с BOM, он содержал скрытые символы BOM, что делало его недействительным и, следовательно, бесполезным для автозаполнения JQueryUI.
Я использовал Notepad ++ для преобразования скрипта, генерирующего JSON, и скриптов контейнера в UTF-8 без спецификации, но я не все чистил.
К счастью, я нашел emrahgunduz / BOMCleaner, который проверил все скрипты, включенные в мое приложение, и очистил их от символов спецификации.
Другие решения
Ваш источник — строка source: "getAFMJSON.php"
Это должно быть значение JSON. Поскольку вы делаете это с помощью ajax, вы должны использовать функцию, которая выполняет запрос ajax и возвращает массив результатов вам в качестве источника.