Автозаполнение пользовательского интерфейса jQuery не будет отображать возвращенный json (PHP) - PullRequest
1 голос
/ 03 мая 2011

JQuery:

$("[type=text]").autocomplete({
source: "json.php",
minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");

Работает нормально, если я изменяю источник: на массив JS. Я знаю, что php работает, потому что я вижу его в консоли, но в любом случае вот пример php:

$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);

Итак, выпадающий список просто не отображается. Чувствую себя довольно глупо прямо сейчас.

Ответы [ 3 ]

2 голосов
/ 04 мая 2011

В вашем файле json.php обязательно установите кодировку содержимого как json с помощью функции header () перед вашим эхо.Таким образом, jQuery должен видеть массив как правильный json.

header("Content-Type: application/json");
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
1 голос
/ 06 мая 2011

Несколько дней назад у меня также были проблемы с автозаполнением, заполненным JSON.

Моя проблема заключалась в том, что я не устанавливал тип содержимого, как сказал Уолли выше:

header("Content-Type: application/json");

Я также поместил свой вызов автозаполнения jQuery в getJSON, а затем использовал данные из этой функции для заполнения поля автозаполнения.Моя интуиция говорит мне, что дополнительный getJSON не должен быть необходим, но, как и у вас, у меня были проблемы со ссылкой на мой файл PHP в качестве источника.

$.getJSON("json.php", function(data) {
    $("[type=text]").autocomplete({
        dataType: "json",
        source: data,
        minLength: 1,
    }); 
});

Поскольку я использую старую версию PHP, яручной мой JSON.Я включил поля «label» и «value», потому что я вполне уверен, что они необходимы для работы автозаполнения.

$jsonList = "[{"label" : "Item 1", "value" : "1"}, {"label" : "Item 2", "value" : "2"}]";
return $jsonList;
1 голос
/ 03 мая 2011

http://jqueryui.com/demos/autocomplete/remote-jsonp.html

Проверьте это получить с сайта демо.

$( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...