Вопрос:

Как выглядит автозаполнение запроса / ответа сервера?

jquery ajax json jquery-ui jquery-ui-autocomplete

80350 просмотра

7 ответа

1967 Репутация автора

Кажется, это черная дыра: после часа поиска на веб-сайте jQuery UI , переполнения стека и поиска в Google мне еще предстоит найти основную информацию о том, как написать серверную часть автозаполнения.

Какой параметр передается на сервер и как должен выглядеть ответ JSON?

Должно быть, я что-то упустил, потому что как все остальные узнали, как это сделать? Кажется, что сайты обсуждают только код JavaScript на стороне клиента, а не примеры протоколов или серверов.

Мне нужно достаточно, чтобы получить самый простой удаленный пример.

Автор: Pete Alvin Источник Размещён: 22.02.2011 11:19

Ответы (7)


69 плюса

110241 Репутация автора

Решение

Какой параметр передается на сервер

Вам нужно перейти request.termна свой серверный код (из документации):

Объект запроса с единственным свойством, называемым «term», который ссылается на значение, которое в данный момент находится в текстовом вводе.

По сути, в вашем autocompleteкоде у вас будет что-то вроде этого:

$("#autocomplete").autocomplete({
    // request.term needs to be passed up to the server.
    source: function(request, response) { ... }
});

и как должен выглядеть ответ JSON?

autocompleteВиджет ожидает массив JSON объектов с labelи valueсвойствами (хотя , если вы просто указать value, он будет использоваться в качестве метки). Так что в простейшем случае вы можете просто вернуть данные, которые выглядят так:

[
    { label: 'C++', value: 'C++' }, 
    { label: 'Java', value: 'Java' }
    { label: 'COBOL', value: 'COBOL' }
]

Если вам нужно что-то более сложное, вы можете использовать successаргумент $.ajaxфункции для нормализации данных, которые вы получите до того, как автозаполнение получит это:

source: function( request, response ) {
    $.ajax({
        /* Snip */
        success: function(data) {
            response($.map( data.geonames, function( item ) {
                return {
                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                    value: item.name
                }
            }));
         }
    });

Этот код взят из примера, приведенного здесь (в целом это хороший пример работы ajax + autocomplete в более сложном сценарии).

По сути, в результате успешного выполнения запроса ajax полученные данные нормализуются (используются $.map) в соответствии с ожиданиями виджета автозаполнения.

Надеюсь, это поможет.

Автор: Andrew Whitaker Размещён: 22.02.2011 02:17

25 плюса

419 Репутация автора

В дополнение к идеальному ответу Эндрю Уитакера, альтернативный метод $ .map - переопределить рендер, пример которого показан на демонстрационной странице пользовательского интерфейса jQuery.

Я использовал эту функциональность, используя вызов JSON следующим образом:

JSON Response

{
   "Records": [
       {
           "WI_ID": "1",
           "Project": "ExampleProject",
           "Work_Item": "ExampleWorkItem",
           "Purchase_Order": "",
           "Price": "",
           "Comments": "",
           "Quoted_Hours": "",
           "Estimated_Hours": "",
           "Achieved": "False",
           "Used_Hours": "0"
       }
   ]
}

JQuery

$("#WorkItem").autocomplete({
      source: function(request, response){
           $.ajax({
               type: "POST",
               url: "ASPWebServiceURL.asmx/WorkItems",
               data: "{'Project_ID':'1'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (msg) {
                   response($.parseJSON(msg.d).Records);
               },
               error: function (msg) {
                   alert(msg.status + ' ' + msg.statusText);
               }
           })
       },

       select: function (event, ui) {
           $("#WorkItem").val(ui.item.Work_Item);
           return false;
       }
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + item.Work_Item + "</a>")
    .appendTo(ul);
};

В этом примере функция _renderItem переопределяется, поэтому список результатов поиска (т. Е. Список, отображаемый под текстовым полем) заполняется с использованием атрибутов записей, которые я получил из ответа JSON.

Хотя это и не так просто, это позволяет вам извлечь некоторые довольно интересные вещи (например, используя несколько бит данных из ответа JSON)

Автор: James Boyden Размещён: 10.10.2011 09:14

0 плюса

1 Репутация автора

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Autocomplete - Categories</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            .ui-autocomplete-category {
                font-weight: bold;
                padding: .2em .4em;
                margin: .8em 0 .2em;
                line-height: 1.5;
            }
            body {
                font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
                font-size: 62.5%;
            }
        </style>
        <script>
            $.widget("custom.catcomplete", $.ui.autocomplete, {
                _renderMenu : function(ul, items) {
                    var that = this, currentCategory = "";
                    $.each(items, function(index, item) {
                        if (item.category != currentCategory) {
                            ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                            currentCategory = item.category;
                        }
                        that._renderItemData(ul, item);
                    });
                }
            });
        </script>
        <script>
            $(function() {
                $("#search").catcomplete({
                    delay : 0,
                    source : function(request, response) {
                        $.ajax({
                            url : "search",
                            dataType : "json",
                            data :"searchText=hk",
                            success : function(data) {
                                response(data);
                            } //success
                        });
                    }
                });
            });
        </script>
    </head>
    <body>enter code here
        <label for="search">Search: </label>
        <input id="search" />
    </body>
</html>
Автор: Hari Agarwal Размещён: 27.09.2013 11:23

2 плюса

192461 Репутация автора

Вам не нужно настраивать сценарий на стороне сервера, чтобы использовать автозаполнение пользовательского интерфейса jQuery. Вы можете указать функцию JavaScript в качестве функции sourceдля создания пользовательских запросов (например, использовать POST или GET, использовать параметры строки запроса, которых ожидает скрипт на стороне сервера) и обрабатывать произвольные ответы (например, обрабатывать ответы XML).

Сказав это, когда вы используете строку в качестве sourceпараметра, то:

[...] плагин автозаполнения ожидает, что эта строка будет указывать на ресурс URL, который будет возвращать данные JSON. Это может быть на том же хосте или на другом (должен предоставить JSONP). Плагин автозаполнения не фильтрует результаты, вместо этого в строку запроса добавляется поле термина , которое серверный сценарий должен использовать для фильтрации результатов. Например, если для параметра source задано значение, http://example.comа пользователь вводит foo, будет выполнен запрос GET http://example.com?term=foo. Сами данные могут быть в том же формате, что и локальные данные, описанные выше.

В отношении «Данные могут быть в том же формате, что и локальные данные, описанные выше» , будут работать следующие форматы JSON (или JSONP):

// no matching entries
[]

// array of strings
[
"Option 1",
"Option 2"
]

// array of objects with label property
[{
    "label": "Option 1"
}, {
    "label": "Option 2"
}]

// array of objects with value property
[{
    "value": "Option 1"
}, {
    "value": "Option 2"
}]

// array of objects with label and value properties
[{
    "label": "Option 1",
    "value": 1
}, {
    "label": "Option 2",
    "value": 2
}]

Для массивов объектов вы можете указать дополнительные свойства помимо метки и / или value. Все свойства будут доступны внутри обратных вызовов.

Автор: Salman A Размещён: 03.12.2013 12:52

7 плюса

11418 Репутация автора

Оба ответа пока сложны и вводят в заблуждение; ключевым понятием jQuery UI Auto Complete является анонимная функция успеха, вы можете использовать / контролировать формат ответа JSON на стороне сервера из-за успешного обратного вызова AutoComplete. Метка, формат значения подходит для подражания, но вы можете определить любой формат JSON, который вам нужен, ключ в том, как вы определяете свою функцию успеха:

 <input id="refPaymentTerms" class="form-control">

$("#refPaymentTerms").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "/admin/JobPaymentRefs",
                        dataType: "json",
                        data: {
                            term: request.termCode
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('Error: ' + xhr.responseText);
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.label,
                                    value: item.value
                                }
                            }));
                        }
                    });
                }
            });

Контроллер MVC:

public JsonResult JobPaymentRefs()
    {
        var query = from REFTerm in _db.REFTerms
                     select new
                    {
                        label = REFTerm.TermCode,
                        value = REFTerm.TermCode
                    };
        //var refTerms = _db.REFTerms.Select(x => x.TermCode);

        return Json(query.ToArray());
    }

Здесь мы видим очень стандартное автоматическое связывание с бэкэндом ASP.NET.

Вы можете возвращать любой формат JSON, который вам нужен на стороне сервера, при условии, что вы правильно отобразите его в анонимном обратном вызове автозаполнения. Метка, пара имя-значение-значение достаточно подходит для большинства требований, но сделайте так, как вы будете на стороне сервера с вашим JSON, просто сопоставьте его правильно в обратном вызове автозаполнения.

Автор: Brian Ogden Размещён: 01.03.2014 06:57

1 плюс

336 Репутация автора

Следующий код работает для меня. Для этого нужны данные в кодировке JSON. Как только мы получаем данные, они изменяют их в соответствии с форматом автозаполнения jQuery, а также позволяют выбирать

var $url = "http://some-url/get-json";
//name is the id of the textbox where autocomplete needs to be shown
$('#name').autocomplete(
{ 
source: function(request,response)  
{ 

  //gets data from the url in JSON format
  $.get($url, function(data)
  {         
    obj = JSON.parse(data);   //parse the data in JSON (if not already)
    response($.map(obj, function(item)
    {
      return {
        label: item.full_name,
        value: item.full_name,
        id:item.id,
        email:item.email,
        phone:item.phone,
      }
    }
  ));        //end response
});          //end get
},
select:function(event, ui)
{ 
 console.log(ui.item.full_name);
 console.log(ui.item.email);
}   

}); //end of autocomplete
Автор: Nava Bogatee Размещён: 18.08.2017 10:31

0 плюса

1055 Репутация автора

Следующее автозаполнение с https://jqueryui.com/autocomplete/#remote-jsonp

Демонстрационная ссылка: https://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

Вот исходный код:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
    .ui-autocomplete-loading {
        background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#birds" ).autocomplete({
            source: function( request, response ) {
                $.ajax( {
                    url: "search.php",
                    dataType: "jsonp",
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                } );
            },
            minLength: 2,
            select: function( event, ui ) {
                log( "Selected: " + ui.item.value + " aka " + ui.item.id );
            }
        } );
    } );
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

Автор: caot Размещён: 11.08.2019 07:38
Вопросы из категории :
32x32