JQuery AJAX автозаполнения не удается добавить

0

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

 <body>

<label for="txtSearch">Select a programming language: </label>
<input id="txtSearch"/>
 <div id="results"></div>

<script>
    $(document).ready(function(){
        $("#txtSearch").autocomplete({
            source: rez,
            appendTo: "#results"
        });
    });

    var rez = function search2() {
        if ($("#txtSearch").val().length > 2) {
            $.ajax({
                type: "post",
                url: "Search.aspx/GetCity",
                data: "{'cityName':'" + $("#txtSearch").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = $.parseJSON(result.d);
                    return obj;
                }
            });
        }
    };
</script>

  • 0
    войти в obj и показать результат. это может не понадобиться.
  • 0
    Это то, что я получаю в ответ, я могу показать его в тревоге, но когда он возвращается к автозаполнению, он ничего не делает [{"ID": "377020", "CityName": "Lon", "Country": "Spain", "Region" ":" Европа "}, {" ID ":" 114927" , "CityName": "Lonaconing", "Страна": "Мэриленд", "Регион": "Америка"}, { "ID": "375281", "CityName": "Lonand", "Country": "India", "Region": "Asia"}, {"ID": "74190", "CityName": "Lonate Ceppino", "Country": "Italy" , "Region": "Europe"}, {"ID": "419873", "CityName": "Lonate Pozzolo", "Country": "Italy", "Region": "Europe"}]
Теги:
jquery-autocomplete

2 ответа

0
Лучший ответ

jQuery обрабатывает JSON-синтаксический анализ для вас. Нет необходимости отправлять его в виде строки или анализировать результат после этого, если ваш dataType "json".

Конкретная проблема заключается в том, что ваша функция rez не имеет необходимых аргументов, переданных ей, request и response. request - это объект, который имеет свойства, относящиеся к поисковому запросу, например. request.term. response - это функция обратного вызова, которую нужно вызвать внутри $.ajax успеха $.ajax чтобы передать данные обратно на автозаполнение.

Вам все еще нужно было проанализировать данные, которые вы возвращали с сервера, поскольку, поскольку автозаполнение ожидает либо простой массив значений, либо массив объектов, содержащих label и value ключей, например:

[
    { label: 'London, England', value: 'LDN' },
    { label: 'Liverpool England', value: 'LPL' }
]

Используйте console.log() чтобы посмотреть на значения, которые вы получаете, и сделать их тем, что вы ожидаете/нуждаетесь.

В документации есть пример, который вы можете найти здесь: http://jqueryui.com/autocomplete/#remote-jsonp

Попробуй это:

$(document).ready(function(){
    $("#txtSearch").autocomplete({
        source: rez,
        appendTo: "#results",
        minLength: 2 // this will check the input is at least 2
    });
});

// request is the search request object,
// response is the callback to pass data back to autocomplete
var rez = function search2( request, response ) {
    $.ajax({
        type: "post",
        url: "Search.aspx/GetCity",
        data: { cityName: request.term },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            // results have to be returned via the response callback as 
            // label/value pairs or just an array of values
            response( $.map( result, function( item ) {
                return {
                    label: [ item.CityName, item.Country, item.Region].join( ', ' ),
                    value: item.ID
                };
            } ) );
        }
    });
};
  • 0
    Нет, это тоже не работает. Функция завершается, но ничего не происходит.
  • 0
    Хорошо, вы должны следовать примерам в документации по jQuery UI. Плагин ожидает, что ответ будет отформатирован определенным образом, и он должен быть передан в функцию обратного вызова. Я обновил свой ответ, чтобы отразить его.
Показать ещё 2 комментария
0

попробуй что-нибудь вроде этого

        success: function( data ) {
            response( $.map( data, function( item ) {
                return {
                label: item.CityName,
                value: item.ID
                }
            }));
        }

СПРАВКА

http://jqueryui.com/autocomplete/#remote-jsonp

Ещё вопросы

Сообщество Overcoder
Наверх
Меню