代码之家 › 专栏 › 技术社区 › gath

在jquery自动完成中,formatfresult和formatem选项做什么?

django jquery javascript

gath · 技术社区 · 15 年前

这里有点困惑,jquery autocomplete插件中的格式结果和格式项是做什么的?

我有一个函数返回逗号分隔的字符串(从django),但我的autocomplete函数无法将字符串拆分为单独的条目/行,如何使用autocomplete函数实现这一点?

例如,返回的结果如下所示,自动完成显示的内容如下: [“一”、“一、二”、“一、三”、“另一个”]

在“自动完成”字段中显示时,我希望将其拆分如下:

one
oneTwo
Onethree
anotherOne

我有一种感觉,我可以使用格式化结果和格式化项,但我不知道如何使用,没有好的例子!!

HTML模板中的我的代码:

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

正在使用Dajango处理获取请求。

加思

2 回复 | 直到 15 年前

vezult 15 年前

formatItem 设置项目的格式以便在下拉列表中显示,同时 formatResult 设置项的格式,以便选中后显示在输入框中。

默认情况下,autocomplete需要从指定的URL获取数据,格式为:

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

其中每一行是一行数据;每一行是它传递到的数据 形成形式 和 格式结果 . 您可能希望采用阻力最小的路径,并按照它喜欢的方式返回数据。

如果要使用不符合自动完成假设的数据,则需要使用(据我所知,是未记录的)解析选项来标识函数来解析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>

Michael 15 年前

到目前为止,我还不能让formatmatch和formatform工作。我仍在研究使用它们的“正确”方法。但是,作为一个解决方法,您可以使用如下的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

当我选择一个时,文本框只接收所选的邮政编码。