jQuery自动完成返回[对象Object]

Question

I've been beating my head against the wall trying to get this work. I'm not very good at this so i'm sure i'm missing something simple. I have searched the knowledgebase but i haven't found something that helps and i'm pretty sure there's a better way of accomplishing this.

I'm trying to have my input field autocomplete but it returns [object Object]. Any help would be greatly appreciated. Thanks!

jquery:

<script>
$('#client_id').autocomplete({
    source: function( request, response ) {
        $.ajax({
            type: "POST",
            url: '/slips/suggest',
            dataType: "json",
            data: {
               user_input: request.term
            },
             success: function( data ) {
                 response( $.map( data, function( item ) {
                    return {
                        label: item,
                        value: item
                    }
                }));
            }
        });
    },
    autoFocus: true,
    minLength: 3
});
  </script>

json output:

[{"label":"Doe, John","value":"1"},{"label":"Doe, Jane","value":"2"},{"label":"Doe, Jack","value":"3"},{"label":"Doe, Jake","value":"4"},{"label":"Doe, Jim","value":"5"}]

html:

<div style="height: 20px;float: left;display: inline-block;padding-top:15px;">
<span class="new_slip">Client</span>
<input type="text" id="client_id" name="client_id" style="width:100px;" />
</div>

Answer 1

The data provided in the response is already in one of the structures that .autocomplete() expects :

• Array
  • ...
  • An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

So, the $.map() isn't necessary, in this case.

// ...
success: response
// ...

---

The [object Object] you're seeing is the default .toString() result for Object s.

console.log({}.toString());
// "[object Object]"

And, comes from assigning each item , which are all Object s, as the label and value :

var data = [ {"label":"Doe, John","value":"1"} ];

data = $.map( data, function ( item ) {
    return {
        label: item,
        value: item
    }
});

console.log(data);
/*
[
    {
        label: { label: "Doe, John", value: 1 },
        value: { label: "Doe, John", value: 1 }
    }
]
*/