jquery autocomplete with json response

Question

im getting response in json, but this wont parse the json response. what m i doing wrong? i could'nt find anything on 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;
  }
});

Dan Atkinson · Accepted Answer · 2012-10-11 22:45:57Z

33

$("#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;
  }
});

check dataType and parse option.

edited Oct 11, 2012 at 22:45

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

answered Oct 20, 2009 at 2:24

Basit

17.3k32 gold badges100 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Satchel Over a year ago

Hi basit, I have the same problem, what is it that you did because I am getting a data.split is not a function

James Lin Over a year ago

I tried to follow this answer and it doesn't work. the formatItem function argument is undefined.

jhanifen Over a year ago

if you want to automatically redirect to page after a selection use this code return row.username+''+name; } }).result(function(event, selected) { location.href = selected.url_param_in_json_or_make_one; });

Question Mark Over a year ago

Also check your JSON is valid and well formed, obvious but a massive gotcha too.

Basit Over a year ago

ya like he said, make sure your json format is valid and all data in json are matching with the function, like items and so on.. else it will give error. it worked fine for me.

|

karim79 · Accepted Answer · 2009-10-20 01:45:53Z

6

I think you just need to throw in a dataType option, I remember readying that you can use any of $.ajax's options in the autocompleter:

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

answered Oct 20, 2009 at 1:45

karim79

343k67 gold badges420 silver badges409 bronze badges

3 Comments

Basit Over a year ago

with that im getting data.split is not a function jquery/jquery.autocomplete.js Line 11 error

Basit Over a year ago

btw im not using that function anywhere.. you can see above my code

karim79 Over a year ago

@basit - because now you're working with an object, split is a function of type Array.

Andrew Whitaker · Accepted Answer · 2011-07-16 00:48:04Z

Try declaring the options outside the scope of $(document).ready(..)

Ex:

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

    });
});

Collectives™ on Stack Overflow

jquery autocomplete with json response

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related