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

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

本文关键字：对象 文本 显示 菜单 UI 滚动 JQuery      更新时间：2023-09-26

我在表单上有一个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;
        }
    });

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

编辑

数组中的第一个参数response在选择下拉列表中呈现，而value（作为第二个参数）应该在进行选择时返回。如果未定义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: 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);
    // ...
}

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

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

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

相关文章：