¿Qué hacen las opciones FormatResult y formatItem en JQuery Autocomplete?

Question

Estoy un poco confundido aquí, ¿qué hacen el formatResult y formatItem en el plugin JQuery Autocomplete?

Tengo una función que devuelve una cadena separada por comas (de Django), pero mi función de autocompletar no puede dividir la cadena en entradas/filas individuales, ¿cómo puedo lograr esto usando las funciones de autocompletar?

por ejemplo, el resultado devuelto se parece a esto y esto lo autocompletar está mostrando: - [ "uno", "oneTwo", "Onethree", "anotherone"]

Quiero al mostrar en el autocompletar campo para que se divide así: -

one 
oneTwo 
Onethree 
anotherOne 

tengo la sensación de que puedo utilizar el formatResult y formatItem pero no sé cómo, no hay buenos ejemplos por ahí !!

mi código en la plantilla html:

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

Am usando Dajango para procesar la solicitud GET.

Gat

Answer 1

formatItem formatea un elemento para mostrar en la lista desplegable, mientras formatResult formatea el elemento para mostrar en el caja de texto, una vez que se ha seleccionado.

Por defecto, autocompletar espera para obtener los datos de la URL especificada con formato:

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

donde cada línea es una fila de datos; cada fila es la información que pasa a formatItem y formatResult. Es posible que desee tomar el camino de menor resistencia y devolver los datos de la manera que quiera.

Si desea utilizar los datos que hace suposiciones de ajuste no autocompletar, usted tendrá que utilizar el (indocumentado, por lo que yo puedo decir) analizar opción para identificar una función para analizar los resultados de su ajax. Me parece que su vista django devuelve una matriz en lugar de devolver una cadena formateada. Para dar formato a su matriz como jQuery le gustaría que:

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

Aquí es un ejemplo de hacer de autocompletar a partir de datos de autocompletar no estándar (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

no he podido conseguir formatMatch y formatResult para trabajar hasta ahora. Todavía estoy trabajando en la forma 'correcta' de usarlos. Sin embargo, como solución, puede usar la opción de análisis de la siguiente manera. Para ser claros, en este ejemplo, formatItem y Parse son funcionales mientras formatResult y formatMatch no son funcionales.

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

Estos son los datos JSON que regresa de la url de datos (espacio en blanco añadió para facilitar la visualización):

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

Cuando escribo un 6 en el cuadro de código postal, que muestra los tres opciones adecuadamente formateados como:

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

y cuando selecciono un cuadro de texto recibe solo los seleccionados c postal oda.