【问题标题】:jquery autocomplete with json response带有json响应的jquery自动完成
【发布时间】: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;
  }
});

【问题讨论】:

    标签: jquery json autocomplete response


    【解决方案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 类型的函数。
      猜你喜欢
      • 1970-01-01
      • 2012-10-08
      • 2011-01-24
      • 1970-01-01
      • 1970-01-01
      • 2011-04-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多