滚动菜单时，JQuery UI Autocomplete 在文本框中显示 [Object object]答案

【问题标题】：JQuery UI Autocomplete shows [Object object] in textbox while scrolling the menu滚动菜单时，JQuery UI Autocomplete 在文本框中显示 [Object object]
【发布时间】：2019-12-19 22:12:08
【问题描述】：

我在一个表单上有一个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] 而不是项目的标签。我是不是做错了什么？

【问题讨论】：

您可以发布 json 响应示例。顺便说一句，我猜url: myServiceUrl 之后缺少逗号是错字？
是的，这是一个错字:) 数据是一个联系人列表，如下所示：{{Name:'John',Tel:'111111111'},{Name:'Sara',Tel:'2222222222 '}}

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

编辑

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);
    // ...
}

【讨论】：

如您所见，值必须是一个对象，因为当用户从菜单中选择一个项目时，我会将其值（姓名和电话）添加到数组中以将其绑定到网格视图。
谢谢 :) 我总是忘记像 javascript 这样的动态语言的美妙之处，您可以在其中动态添加属性/字段和方法 :) 我会检查一切是否正常并接受你的答案:)

【解决方案2】：

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

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

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

【讨论】：