javascript - formatResult 和 formatItem 选项在 JQuery 自动完成中有什么作用？

Question

我有点困惑，JQuery Autocomplete 插件中的 formatResult 和 formatItem 是做什么的？

我有一个返回逗号分隔字符串的函数(来自 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
         });
       }

正在使用 Dajango 处理 GET 请求。

加思

Answer 1

formatItem 格式化项目以显示在下拉列表中，而 formatResult 格式化项目以在选择后显示在输入框中。

默认情况下，自动完成期望从指定的 url 中获取数据，格式如下:

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

其中每一行是一行数据；每行都是它传递给 formatItem 和 formatResult 的数据。您可能希望采用阻力最小的路径并以喜欢的方式返回数据。

如果您想使用不符合自动完成假设的数据，您将需要使用(据我所知未记录)解析选项来识别一个函数来解析您的 ajax 请求的结果。在我看来，您的 django View 正在返回一个数组而不是返回一个格式化的字符串。将数组格式化为 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>