2009-04-10 2 views
9

Немного смущает здесь, что делает форматResult и formatItem в плагине JQuery Autocomplete?Что делает параметры formatResult и formatItem в JQuery Autocomplete?

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

например, возвращаемый результат выглядит так, и это то, что автозаполнения показывает: - [ «один», «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 
     }); 
     } 

Am используя Dajango обработать запрос GET.

Gath

+0

Не стесняйтесь просить уточнить мой ответ в случае необходимости. Если он обратится к вашему вопросу, пожалуйста, присудите мне ответ. ;) – vezult

ответ

17

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

По умолчанию автозаполнение ожидает получить данные из указанного 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> 
+0

Спасибо за сообщение, это было очень полезно! –

+0

Я думаю, было бы более понятно, если вы изменили данные примера «foo | bar | baz», чтобы отразить пример поиска книг из раздела JSON. –

+0

Я думаю, вам следует более четко выделить, что ваш ответ содержит два разных подхода (разделить его на 2 ответа?) –

2

Я не был в состоянии получить formatMatch и formatResult для работы до сих пор. Я все еще работаю над «правильным» способом их использования. Однако в качестве обходного пути вы можете использовать опцию parse следующим образом. Чтобы быть ясным, в этом примере 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 

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