带有json响应的jquery自动完成

Posted 2023-03-05

【中文标题】带有json响应的jquery自动完成

【英文标题】：jquery autocomplete with json response

【发布时间】：2010-12-08 04:50:53

【问题描述】：

我在 json 中得到响应，但这不会解析 json 响应。我做错了什么？我在 doc http://docs.jquery.com/Plugins/Autocomplete

上找不到任何内容

$("#users-allowed").autocomplete("/people/following.json", 
  width: 320,
  //max: 4,
  highlight: false,
  scroll: true,
  scrollHeight: 300,
  formatItem: function(response, i, max) 
    console.log(response);
    console.log(response['items']);
    console.log(response.items);
    return i + "/" + max + ": \"" + response.status_code + "\" [" + response.status_description + "]";

    //return "<img src='images/" + value + "'/> " + value.split(".")[0];
  ,
  formatResult: function(response) 
    //return value.split(".")[0];
    return response.status_description;
  
);

【参考方案1】：

$("#users-allowed").autocomplete("/people/following.json", 
  width: 320,
  dataType: 'json',
  highlight: false,
  scroll: true,
  scrollHeight: 300,
  parse: function(data) 
    var array = new Array();
    for(var i=0;i<data.items.length;i++) 
      array[array.length] =  data: data.items[i], value: data.items[i], result: data.items[i].username ;
    
    return array;
  ,
  formatItem: function(row)                
    var name = '';
    if (row.first_name && row.last_name)
      name = '('+row.first_name+', '+row.last_name+')';
    else if (row.first_name)
      name = '('+row.first_name+')';
    else if (row.last_name)
      name = '('+row.last_name+')';

    return row.username+' '+name;
  
);

检查数据类型和解析选项。

【讨论】：

嗨，basit，我有同样的问题，你做了什么，因为我得到了一个 data.split 不是一个函数

我试图遵循这个答案，但它不起作用。 formatItem 函数参数未定义。

如果您想在选择后自动重定向到页面，请使用此代码 return row.username+''+name; ).result(function(event, selected) location.href = selected.url_param_in_json_or_make_one; );

还要检查您的 JSON 是否有效且格式正确，这很明显，但也是一个很大的问题。

你就像他说的那样，确保你的 json 格式是有效的，并且 json 中的所有数据都与函数匹配，比如项目等等。否则会出错。对我来说效果很好。

【参考方案2】：

尝试声明$(document).ready(..)范围之外的选项

例如：

var acCbo = 
        minChars: 1,
        delay:500,
        max: 100,
        width: 400,
        dataType: 'json', // this parameter is currently unused
        extraParams: 
            format: 'json', //pass the required context to the Zend Controller,
            filtro: 'id_procsianv,id_atividade',
            chave: function()
                return $('#id_procsianv').val()+','+$('#id_atividade').val();
            
        ,
        queryParam: "descricao",
        parse: function(data) 
            if (data['qtde']>0)
                data = data['Cbo'];
                var parsed = [];
                for (var i = 0; i < data.length; i++) 
                    parsed[parsed.length] = 
                        data: data[i],
                        value: data[i].id_cbo,
                        result: $('<textarea/>').html(data[i].no_cbo).val()
                    ;
                
                return parsed;
            else
                $('#id_cbo').val('');
                return [];
            
        ,
        formatItem: function(item) 
            return item.no_cbo+ ' (' +item.id_cbo+ ')';
        
    ;

    $(document).ready(function()

    $('#cbo').autocomplete('/cbos/index',acCbo)
    .result(function(e,data)
        $('#id_cbo').val(data.id_cbo);

    );
);

【参考方案3】：

我认为你只需要输入一个dataType 选项，我记得准备好你可以在自动完成器中使用$.ajax 的任何选项：

$("#users-allowed").autocomplete("/people/following.json", 
    dataType: "json",
    ...

【讨论】：

我正在获取 data.split 不是函数 jquery/jquery.autocomplete.js 第 11 行错误

顺便说一句，我没有在任何地方使用该功能..您可以在我的代码上方看到

@basit - 因为现在你正在处理一个对象，split 是一个 Array 类型的函数。