JQuery 自动完成中的 formatResult 和 formatItem 选项有啥作用？

Posted 2023-02-24

【中文标题】JQuery 自动完成中的 formatResult 和 formatItem 选项有啥作用？

【英文标题】：What does formatResult and formatItem options do in JQuery Autocomplete?JQuery 自动完成中的 formatResult 和 formatItem 选项有什么作用？

【发布时间】：2010-10-18 18:10:18

【问题描述】：

这里有点迷糊，JQuery Autocomplete插件中的formatResult和formatItem是做什么的？

我有一个函数返回逗号分隔的字符串（来自 Django），但我的自动完成功能无法将字符串拆分为单独的条目/行，我如何使用自动完成功能实现这一点？

例如，返回的结果如下所示，这是自动完成显示的内容：- ["one","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 请求。

加特

【问题讨论】：

如有必要，请随时要求澄清我的答案。如果它解决了你的问题，请给我答案。 ;o)

【参考方案1】：

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

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

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

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

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

【讨论】：

感谢您的帖子，非常有帮助！

我认为如果您更改“foo|bar|baz”示例数据以反映 JSON 部分中的图书搜索示例会更清楚。

我认为您应该更清楚地强调您的答案包含 2 种不同的方法（将其分成 2 个答案？）

也许您可以将“这是使用非标准自动完成数据 (JSON) 进行自动完成的示例”更改为简单的“这是使用 (JSON) 进行自动完成的示例”

我认为如果“未记录的”注释从行上方移动到该行的右侧，或者它读到类似（“将未记录的解析函数实现替换为可以解析 JSON 数据")

【参考方案2】：

到目前为止，我还无法让 formatMatch 和 formatResult 正常工作。我仍在研究使用它们的“正确”方式。但是，作为一种解决方法，您可以使用 parse 选项，如下所示。需要说明的是，在这个例子中，formatItem 和 parse 是有效的，而 formatResult 和 formatMatch 是无效的。

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

这是从数据 url 返回的 json 数据（空格 添加以便于查看）：

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

当我在邮政编码框中输入 6 时，它会显示所有三个选项 正确格式化为：

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

当我选择一个时，文本框只会收到所选的 邮政编码。