Question

这里有点困惑，formatResult和formatItem在JQuery Autocomplete插件中做了什么？

我有一个返回逗号分隔字符串的函数（来自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请求。

加特

Answer 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>

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

这是从数据网址返回的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

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

formatResult和formatItem选项在JQuery自动完成中的作用是什么？

2 个答案: