Что делают параметры formatResult и formatItem в JQuery Autocomplete?

Question

Я немного запутался, что делают formatResult и formatItem в плагине JQuery Autocomplete?

У меня есть функция, которая возвращает строку, разделенную запятыми (из Django), но моя функция автозаполнения не может разбить строку на отдельные записи / строки, как я могу добиться этого с помощью функций автозаполнения?

например, возвращаемый результат выглядит следующим образом, и это показывает автозаполнение: - ["one", "oneTwo", "Onethree", "anotherOne"]

Я хочу, чтобы при отображении в поле автозаполнения оно разделялось следующим образом: -

one
oneTwo
Onethree
anotherOne

У меня такое чувство, что я могу использовать formatResult и formatItem, но я не знаю как, хороших примеров там нет !!

мой код в html-шаблоне:

 function autoFill(){
           $("#tags").autocomplete("/taglookup/", {
        width: 320,
        max: 4,
        highlight: false,
        multiple: true,
        multipleSeparator: " ",
        scroll: true,
        scrollHeight: 300
         });
       }

Я использую Dajango для обработки запроса GET.

Гаф

Answer 1

formatItem форматирует элемент для отображения в раскрывающемся списке, а formatResult форматирует элемент для отображения в поле ввода после его выбора.

По умолчанию автозаполнение предполагает получение данных по указанному URL-адресу в формате:

foo|bar|baz|bing
zaz|ding|blop|grok

где каждая строка представляет собой строку данных; каждая строка представляет собой данные, которые она передает formatItem и formatResult. Вы можете выбрать путь наименьшего сопротивления и возвращать данные так, как им нравится.

Если вы хотите использовать данные, которые не соответствуют предположениям автозаполнения, вам нужно будет использовать (недокументированную, насколько я могу судить) опцию разбора, чтобы определить функцию для анализа результатов вашего запроса ajax. Мне кажется, что ваше представление django возвращает массив, а не возвращает отформатированную строку. Чтобы отформатировать ваш массив как jquery:

return HttpResponse('|'.join(your_array), mimetype='text/plain')

Вот пример выполнения автозаполнения с использованием нестандартных данных автозаполнения (JSON):

<script type="text/javascript"> 
  format_item = function (item, position, length){ 
    return item.title; 
  } 

 // Handle data from ajax request 
 prep_data = function(data){ 
   tmp = $.evalJSON(data); 
   parsed_data = []; 
   for (i=0; i < tmp.length; i++) { 
     obj = tmp[i]; 
     // Other internal autocomplete operations expect 
     // the data to be split into associative arrays of this sort 
     parsed_data[i] = { 
        data: obj , 
        value: obj.isbn13, 
        result: obj.title 
     }; 
   } 
   return parsed_data 
 } 

 $(document).ready(function(){ 
   $("#fop").autocomplete({ 
          url : "{% url book-search %}", 
          // undocumented 
          parse: prep_data, 
          formatItem: format_item, 
          }); 
 }) 

</script>

Answer 2

Мне не удалось заставить работать formatMatch и formatResult. Я все еще работаю над «правильным» способом их использования. Однако в качестве обходного пути вы можете использовать опцию разбора следующим образом. Для ясности, в этом примере formatItem и parse работают, а formatResult и formatMatch не работают.

jQuery(function(){
   $('#profile-tabs_addresses_grid_b_a_PostalCode').autocomplete
('http://test.mydomain.com/locality/postalcodes/', {
       minChars:1,
       delay:400,
       cacheLength:100,
       matchContains:true,
       max:10,
       formatItem:function(item, index, total, query){
           return item.PostalCode + ': ' + item.Region + ', ' +
item.City + ', ' + item.Country;
       },
       formatMatch:function(item){
           return item.PostalCode;
       },
       formatResult:function(item){
           return item.PostalCode;
       },
       dataType:'json',
       parse:function(data) {
                       return $.map(data, function(item) {
                               return {
                                       data: item,
                                       value: item.PostalCode,
                                       result: item.PostalCode
                               }
                       });
               }});
});

вот данные json, которые возвращаются из URL-адреса данных (пробел добавлено для удобства просмотра):

[
       {City:"St. Louis", Country:"USA", PostalCode:"63103", ID:3,
Region:"Missouri"},
       {City:"St. Louis", Country:"USA", PostalCode:"63109", ID:1,
Region:"Missouri"},
       {City:"St. Louis", Country:"USA", PostalCode:"63119", ID:2,
Region:"Missouri"}
]

Когда я набираю 6 в поле почтового индекса, он показывает все три варианта правильно отформатирован как:

63103: Missouri, St. Louis, USA
63109: Missouri, St. Louis, USA
63119: Missouri, St. Louis, USA

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