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

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

Я использовал эту функцию, используя JSON-вызов:

Ответ JSON

{
   "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)

Оба ответа до сих пор сложны и вводят в заблуждение, ключевое понимание jQuery UI Auto Complete - это анонимная функция успеха, у вас есть рычаг/управление форматом ответа JSON на стороне сервера из-за успешного обратного вызова автозаполнения. Ярлык, формат значений подходит для вас, но вы можете определить любой желаемый формат 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, который вам нужен на стороне сервера, если вы правильно его сопоставляете в анонимном обратном вызове AutoComplete. Параметр label, value value value достаточно хорош для большинства требований, но, как вы будете на стороне сервера, ваш JSON просто правильно отобразит его в обратном вызове автозаполнения.

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

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

[...] плагин Autocomplete ожидает, что строка укажет на URL-адрес ресурс, который будет возвращать данные JSON. Он может находиться на том же хосте или на другой (должен предоставить JSONP). Плагин Autocomplete не фильтруйте результаты, вместо этого строка запроса добавляется с полем termкоторые серверная сторона script должна использовать для фильтрации результатов. Для Например, если для параметра источника установлено значение 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. Все свойства будут доступны внутри обратных вызовов.

Для меня работает следующий код. Для этого нужны 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

<!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>