Que font les options formatResult et formatItem dans la saisie semi-automatique JQuery?

Question

Suis un peu confus ici, que font le formatResult et formatItem dans le plugin JQuery Autocomplete?

J'ai une fonction qui renvoie une chaîne séparée par des virgules (depuis Django), mais ma fonction de saisie semi-automatique est incapable de diviser la chaîne en entrées/lignes individuelles, comment puis-je y parvenir?

par exemple le résultat retourné ressemble à ceci et ce que Autocomplete: - de la [ "one", "oneTwo", "Onethree", "anotherOne"]

Je veux en montrant dans la saisie semi-automatique champ pour avoir partagé comme celui-ci: -

one 
oneTwo 
Onethree 
anotherOne 

J'ai le sentiment que je peux utiliser le formatResult et formatItem mais je ne sais pas comment, il n'y a pas de bons exemples là-bas !!

mon code dans le modèle html:

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

Am en utilisant Dajango pour traiter la demande GET.

Gath

Answer 1

formatItem formate un élément pour l'affichage dans la liste déroulante, tandis que l'élément formatResult formate pour l'affichage dans la inputbox une fois qu'il est sélectionné.

Par défaut, autocomplete pour obtenir des données attend de l'URL spécifiée comme format:

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

où chaque ligne est une ligne de données; chaque ligne étant les données qu'elle transmet à formatItem et formatResult. Vous voudrez peut-être prendre le chemin de la moindre résistance et retourner les données comme bon vous semble.

Si vous souhaitez utiliser des données qui ne correspondent pas aux hypothèses de saisie semi-automatique, vous devez utiliser l'option d'analyse (non documentée, pour autant que je sache) pour identifier une fonction pour analyser les résultats de votre requête ajax. Il me semble que votre vue django retourne un tableau plutôt que de retourner une chaîne formatée. Pour formater votre tableau comme jquery serait semblable:

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

Voici un exemple de faire autocomplete en utilisant des données de saisie semi-automatique non standard (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

Je n'ai pas été en mesure d'obtenir formatMatch et formatResult pour travailler jusqu'à présent. Je travaille toujours sur la façon «correcte» de les utiliser. Toutefois, en guise de solution de contournement, vous pouvez utiliser l'option d'analyse comme suit. Pour être clair, dans cet exemple, formatItem et parse sont fonctionnels alors que formatResult et formatMatch ne sont pas fonctionnels.

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

Voici les données JSON qui revient de l'url de données (espaces ajouté pour faciliter la visualisation):

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

Lorsque je tape un 6 dans la zone de code postal, il montre trois Options correctement formatées comme:

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

et lorsque je sélectionne une zone de texte reçoit le juste sélectionné c postal ode.