JQuery UI Autocomplete shows [Object object] in textbox while scrolling the menu

by Artur Filipiak

HTML

<input id="recieverNumber" type="text" />
<br>
<br>
<table>
    <thead>
        <tr>
            <th>Person</th>
            <th>Phone</th>
            <th></th>
        </tr>
    </thead>
    <tbody class="tbody">
    </tbody>
</table>

CSS

.del{
    color: red;
    font-size:20px;
    text-decoration: none;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
    padding:10px;
}

JavaScript

//// FOR DEMO: ///////////////////////////////
$('body').on('click', '.del', function(e){
    e.preventDefault();
    var name = $(this).closest('tr').find('td:nth-child(1)').text();
    var tel = $(this).closest('tr').find('td:nth-child(2)').text();
    fakeData.push({ Name: name, Tel: tel });
    var c = 0;
    recievers.forEach(function (value, index) {
        if (value.Name == name) {
            recievers.splice(c, 1);
        }
        c++;
    });
    $(this).parents('tr').remove();  
});

//// Fake data:
var fakeData = 
[
    { Name : 'John'  , Tel : '1111111111' },
    { Name : 'Sara'  , Tel : '2222222222' },
    { Name : 'Adam'  , Tel : '3333333333' },
    { Name : 'Anna'  , Tel : '4444444444' },
    { Name : 'Paul'  , Tel : '5555555555' },
    { Name : 'Cindy' , Tel : '6666666666' }
];

var recievers = [];
var myServiceUrl = '/echo/html/';
function notifyRecieversChanged() {
	console.log(recievers);
    var tr = '';
    $.each(recievers, function(k,v){
        tr += '<tr><td>'+v.Name+'</td><td>'+v.Tel+'</td><td><a href="#" class="del">x</a></td></tr>';
    });
    $('.tbody').html(tr);
}
//////////////////////////////////////


$("#recieverNumber").autocomplete({
    source: function (request, response) {
        $.ajax({
            dataType: "html",
            type: 'post',
            url: myServiceUrl,
            success: function (data) {
                
                var result = [];
                
                // used fakeData for demo
                fakeData.forEach(function (value, index) {
                    result.push({ label: value.Name, data: value });
                });
                response(result);
            },
            error: function (data, err, message) {
                
            }
        });
    },
    messages: {
        noResults: '',
        results: function () { }
    },
    select: function (event, ui) {
        recievers.push(ui.item.data);
        notifyRecieversChanged();
       ...