JQuery 自动完成：未捕获的 TypeError：无法读取未定义的属性“值”答案

【问题标题】：JQuery autocomplete: Uncaught TypeError: Cannot read property 'value' of undefinedJQuery 自动完成：未捕获的 TypeError：无法读取未定义的属性“值”
【发布时间】：2015-11-19 10:12:37
【问题描述】：

我正在使用this jquery autocomplete 插件。但是当我搜索点击过滤的结果时，我得到了这个错误：

未捕获的类型错误：无法读取未定义的属性“值”

这是来自检查器控制台的堆栈跟踪：

Uncaught TypeError: Cannot read property 'value' of undefined
Autocomplete.onSelect @ jquery.autocomplete.min.js:915
Autocomplete.select @ jquery.autocomplete.min.js:850
(anonymous function) @ jquery.autocomplete.min.js:195
n.event.dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

这是我调用的方法：

var url = $(item).data('url');
var keyField = $(item).data('keyField') !== undefined ? $(item).data('keyField') : 'id';
var valueField = $(item).data('valueField') !== undefined ? $(item).data('valueField') : 'description';

$(myItem).devbridgeAutocomplete({
    serviceUrl: myUrl,
    minChars: 0,
    type: 'post',
    deferRequestBy: 500,
    transformResult: function (response) {
        var json_response = $.parseJSON(response);

        var suggestions = $.map(json_response.items, function (dataItem) {
                var interface = $('.content-wrapper').interface();

                return {value: dataItem[valueField], data: dataItem[keyField]};
            });

        return {suggestions: suggestions};
    },
    onSelect: function (suggestion) {
        // Do my stuff to populate the view
    }
});

查看源代码，当调用函数onSelect() 时出现问题，因为数组中没有建议。

为什么这个数组是空的？我正在选择一个过滤值，所以应该有一个元素

【问题讨论】：

devbridgeAutocomplete ??
@jai github.com/devbridge/jQuery-Autocomplete#known-issues
我找不到您的 valueField 和 keyField 的定义位置。
哦，是的，对不起...这两个值是输入上的data-value-field 和data-key-field。由于我有很多自动完成功能，因此我使用这两个字段来了解返回的响应类型...例如，如果我在第一个自动完成功能中返回 ID、NAME、DESCRIPTION 的响应，我想要 ID 和 NAME，而在第二个在这种情况下，我想要 ID 和说明，我要查找的是 ID 和说明
奇怪的 SO 没有自动加载。很高兴知道您的问题已解决。

标签： javascript jquery autocomplete

【解决方案1】：

我已经找到了解决问题的方法：

这是我在 GitHub 上打开的issue。问题出在onSelect() 函数上。

我指的是版本1.2.24

onSelect: function (index) {
        var that = this,
            onSelectCallback = that.options.onSelect,
            suggestion = that.suggestions[index];

        that.currentValue = that.getValue(suggestion.value);

        if (that.currentValue !== that.el.val() && !that.options.preserveInput) {
            that.el.val(that.currentValue);
        }

        that.signalHint(null);
        that.suggestions = [];
        that.selection = suggestion;

        if ($.isFunction(onSelectCallback)) {
            onSelectCallback.call(that.element, suggestion);
        }
    },

我已将方法更改为：

onSelect: function (index) {
    var that = this,
            onSelectCallback = that.options.onSelect,
            suggestion = that.suggestions.length >= 1 ? that.suggestions[index] : that.suggestions;

    that.currentValue = that.getValue(suggestion.value);

    if (that.currentValue !== that.el.val() && !that.options.preserveInput) {
        that.el.val(that.currentValue);
    }

    that.signalHint(null);
    that.suggestions = [];
    that.selection = suggestion;

    if ($.isFunction(onSelectCallback)) {
        onSelectCallback.call(that.element, suggestion);
    }
},

【讨论】：

【解决方案2】：

我在访问值之前添加了检查：标签 = ui.item.attr("aria-label") || (item?item.value:'');

【讨论】：