I'm using this jquery autoplete plugin. But when I search click on a filtered result i get this error:

Uncaught TypeError: Cannot read property 'value' of undefined

Here is the stacktrace from the inspector console:

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

Here is the method I call:

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).devbridgeAutoplete({
    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
    }
});

Looking at the source code, the problem raises when the function onSelect() is called because no suggestions are in the array.

Why that array is empty? I'm selecting a filtered value so should have one element

I'm using this jquery autoplete plugin. But when I search click on a filtered result i get this error:

Uncaught TypeError: Cannot read property 'value' of undefined

Here is the stacktrace from the inspector console:

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

Here is the method I call:

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).devbridgeAutoplete({
    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
    }
});

Looking at the source code, the problem raises when the function onSelect() is called because no suggestions are in the array.

Why that array is empty? I'm selecting a filtered value so should have one element

• javascript
• jquery
• autoplete

Share Improve this question Follow edited Nov 19, 2015 at 10:37 IlGala asked Nov 19, 2015 at 10:12 IlGalaIlGala 3,42944 gold badges4040 silver badges5252 bronze badges 7

• devbridgeAutoplete ?? – Jai Commented Nov 19, 2015 at 10:22
• @jai github./devbridge/jQuery-Autoplete#known-issues – Ejaz Commented Nov 19, 2015 at 10:26
• I couldn't find where your valueField and keyField are defined. – kernel Commented Nov 19, 2015 at 10:28
• Oh yes, sorry... These two values are a data-value-field an data-key-field on the input. Since I have many autoplete, I use these two fields in order to know what kind of response is returned... For example if I return a response with ID, NAME, DESCRIPTION in the first autoplete I want ID and NAME and in the second I want ID and DESCRIPTION in this case what i look for is ID and Description – IlGala Commented Nov 19, 2015 at 10:32
• 1 strange SO didn't load that automatically. Good to know you got your issue resolved. – Ejaz Commented Nov 19, 2015 at 16:23

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 1

I've found a solution for the problem:

Here is the issue I've opened on GitHub. The problem was on the onSelect() function.

I refer to the version 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);
        }
    },

I've changed the method to:

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

I added check before accessing value: label = ui.item.attr( "aria-label" ) || (item?item.value:'');