Question

Am a bit confused here, what does the formatResult and formatItem do in the JQuery Autocomplete plugin?

I have a function that is returning a comma separated string (from Django), but my autocomplete function is unable to split the string into individual entries/rows, how can i achieve this using autocomplete functions?

e.g the returned result looks like this and this what autocomplete is showing :- [‘one’,’oneTwo’, ‘Onethree’, ‘anotherOne’]

I want when showing in the autocomplete field to have it split like this:-

one oneTwo Onethree anotherOne 

I have a feeling i can use the formatResult and formatItem but i dont know how, there are no good examples out there !!

my code in the html template:

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

Am using Dajango to process the GET request.

Gath

Answer 1

formatItem formats an item for display in the dropdown list, while formatResult formats the item for display in the inputbox once it is selected.

By default, autocomplete expects to get data from the specified url formatted as:

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

where each line is a row of data; each row being the data that it passes to formatItem and formatResult. You may want to take the path of least resistance and return data in the way it likes.

If you want to use data that doesn’t fit autocomplete’s assumptions, you’ll need to use the (undocumented, as far as I can tell) parse option to identify a function to parse the results of your ajax request. It appears to me that your django view is returning an array rather than returning a formatted string. To format your array as jquery would like it:

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

Here is an example of doing autocomplete using non-standard autocomplete data (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>