JQuery UI автозаполнение не отображает результаты

Question

Я знаю, что заголовок вопроса выглядит как дубликат, но я не смог найти ответ на этот вопрос.

Я использую автозаполнение интерфейса Jquery UI и вижу, что поступают правильные данные JSONобратно в мой отладчик.Однако к текстовому полю ничего не возвращается.

Мой javascript:

<script type="text/javascript">
    $(document).ready(function () {
        myAutoComplete("#<%= myTxtBox.ClientID %>", "AutoCompletePage.aspx");
    });

    function myAutoComplete(ObjectId, DataURL) {
        $(ObjectId).autocomplete({
            source: function (request, response) {
                $.ajax({ url: DataURL, dataType: 'jsonp',
                    data: { q: request.term, limit: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item[1], value: item[0], id: item[0]}
                        }))
                    }
                })
            }
        });
    }

</script>

фрагмент из моей страницы AutoCompletePage.aspx:

foreach (DataRow dataRow in dataTable.Rows)
{
    string[] cells = new string[] { dataRow[0].ToString(), dataRow[1].ToString() };
    output.Add(cells);
}

И позже ...

Response.Write(json.Serialize(output));

На этом рисунке видно, что данные JSON возвращаются , но с моим текстовым полем ничего не происходит.Заранее спасибо всем, кто может помочь.

Answer 1

У меня есть подозрение, что вы не должны использовать jsonp здесь.JSONP обычно используется для междоменных запросов.

Похоже, что вы делаете запрос в том же домене (кроме того, возвращаемые данные могут не иметь функции обратного вызова для вызова), так что у вас должно быть все в порядкепросто используя обычный json.

Попробуйте изменить параметр datatype на json:

    $(ObjectId).autocomplete({
        source: function (request, response) {
            $.ajax({ url: DataURL, dataType: 'json',
                data: { q: request.term, limit: 10 },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item[1], value: item[0], id: item[0]}
                    }))
                }
            })
        }
    });