2009-04-10 11 views
9

Nieco mylić tutaj, co robi formatResult i formatItem w plugin JQuery Autocomplete?Co robi opcja formatResult i formatItem w autouzupełnianiu JQuery?

Mam funkcję, która zwraca ciąg znaków oddzielonych przecinkami (od Django), ale funkcja autouzupełniania nie może podzielić ciągu na poszczególne wpisy/wiersze, w jaki sposób mogę to osiągnąć za pomocą funkcji autouzupełniania?

np zwrócony wynik wygląda tak a to co autouzupełnianie pokazuje: - [ „jeden”, „OneTwo”, „Onethree”, „anotherOne”]

chcę kiedy pokazano w autouzupełniania pole, aby go podzielić tak: -

one 
oneTwo 
Onethree 
anotherOne 

mam wrażenie, że mogą korzystać z formatResult i formatItem ale nie wiem jak, nie ma dobrych przykładów tam !!

mojego kodu w szablonie html:

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

używam Dajango aby przetworzyć żądania GET.

Gat

+0

Możesz poprosić o wyjaśnienie mojej odpowiedzi, jeśli to konieczne. Jeśli dotyczy twojego pytania, proszę, udziel mi odpowiedzi. ; o) – vezult

Odpowiedz

17

formatItem formatuje element do wyświetlania na liście rozwijanej, a formatResult formatuje pozycję na wyświetlaczu w inputbox po jego wybraniu.

Domyślnie autouzupełnianie spodziewa się uzyskać dane z określonego adresu URL sformatowane jako:

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

gdzie każda linia jest wiersz danych; każdy wiersz to dane, które przechodzi do formatItem i. Możesz podążać ścieżką najmniejszego oporu i zwracać dane w sposób, który lubi.

Jeśli chcesz użyć danych, które nie pasują do założeń autouzupełniania, musisz użyć opcji (nieudokumentowanej, o ile wiem) do zidentyfikowania funkcji do analizy wyników zapytania ajax. Wydaje mi się, że twój widok django zwraca tablicę zamiast zwracać sformatowany ciąg znaków. Aby sformatować swoją tablicę tak jak jQuery podoba:

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

Oto przykład robić autouzupełnianie przy użyciu niestandardowych dane autouzupełniania (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

Dzięki za twój post, to było bardzo pomocne! –

+0

Myślę, że byłoby bardziej jasne, jeśli zmienisz przykładowe dane "foo | bar | baz", aby odzwierciedlić przykład wyszukiwania książek z sekcji JSON. –

+0

Myślę, że należy wyraźniej podkreślić, że twoja odpowiedź zawiera 2 różne podejścia (podzielić na 2 odpowiedzi?) –

2

I nie były w stanie uzyskać formatMatch i formatResult do tej pory działa. Nadal pracuję nad "poprawnym" sposobem ich użycia. Jednak jako obejście można użyć opcji analizy w następujący sposób. Dla jasności w tym przykładzie formatItem i pars są funkcjonalne, gdy formatResult i formatMatch nie działają.

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 
           } 
         }); 
       }}); 
}); 

oto dane json, że wraca z url danych (spacje dodana dla lepszej czytelności):

[ 
     {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"} 
] 

Kiedy wpisuję 6 W oknie kodu pocztowego, pokazuje wszystkie trzy Opcje prawidłowo sformatowany jako:

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

i kiedy wybrać jedno pole tekstowe odbiera tylko wybrane c pocztowy oda.