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

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

Answer 1

修改

response数组中的第一个参数在select下拉列表中呈现，而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); // ... }

Answer 2

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

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

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

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

2 个答案: