JQuery UI 自动完成在滚动菜单时在文本框中显示 [Object object]

Question

我在表格上有一个 textbox，我在上面附加了一个 jquery ui autocomplete，如下所示：

$("#recieverNumber").autocomplete({
        source: function (request, response) {
            $.ajax({
                dataType: "json",
                type: 'Get',
                url: myServiceUrl,
                success: function (data) {
                    $('input.suggest-user').removeClass('ui-autocomplete-loading');  // hide loading image
                    var result = [];
                    data.forEach(function (value, index) {
                        result.push({ value: value, label: value.Name });
                    });
                    response(result);
                },
                error: function (data, err, message) {
                    $('input.suggest-user').removeClass('ui-autocomplete-loading');

                }
            });
        },
        messages: {
            noResults: '',
            results: function () { }
        },
        select: function (event, ui) {
            recievers.push(ui.item.value);
            notifyRecieversChanged();
            $(this).val('');
            return false;
        }
    });

如您所见，我从服务器端服务获取其源代码，然后我构建了一个具有值的对象数组，label.Everything 工作正常，但只要自动完成菜单中有多个项目，并且我想滚动菜单以找到我在 textbox 中看到 [Object object] 的所需项目，而不是项目的标签。我做错了什么吗？

Answer 1

编辑

response 数组中的第一个参数在 select 下拉列表中呈现，而 value（作为第二个参数）应该在 selection 生成时返回.如果未定义 value，则返回 label。

Json（参考问题下方的评论）：

{
    {Name:'John',Tel:'111111111'},
    {Name:'Sara',Tel:'2222222222'}
}

尝试：

成功回调:

success : function(data){
    data.forEach(function (value, index) {
        // add 'data', remove 'value', select will be rendered from 'label'
        // If you want display value (Tel) after selection, use this:
        // result.push({label:value.Name, value:value.Tel, data:value });
        result.push({label:value.Name, data:value });
    });
    response(result);
}

Select回调:

select: function (event, ui) {
    // use 'data' instead of value:
    recievers.push(ui.item.data);
    // ...
}

JSFiddle

最终，您可以通过回显已经准备好的 Json.

来简化它

PHP:

echo json_encode(
    array(
        array(
            'label'=>'John',
            'data'=>array(
                'Name'=>'John', 'Tel'=>'111111111'
            )
        ),
        array(
            'label'=>'Sara',
            'data'=>array(
                'Name'=>'John', 'Tel'=>'2222222222'
            )
        )
    )
);

然后：

success: function (data) {
    response(data);
}

// ...

select: function (event, ui) {
    recievers.push(ui.item.data);
    // ...
}

Answer 2

我遇到了同样的问题。滚动列表时，我在文本字段中看到“[object object]”。覆盖默认焦点行为对我有用：

    focus: function (event, ui) {
        event.preventDefault();
    },

https://api.jqueryui.com/autocomplete/#event-focus

JQuery UI 自动完成在滚动菜单时在文本框中显示 [Object object]

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

javascript

jquery

jquery-ui

autocomplete