devbridge / jQuery-Autocomplete

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Other
3.56k stars 1.66k forks source link

onHint tab doesn't work with custom lookup function #836

Open Woet opened 2 years ago

Woet commented 2 years ago

Hi,

Thanks for the great library! I've been running into some issues with onHint tabbing throwing errors and I narrowed it down to it happening whenever a custom lookup function is being used. You can find a working test case here: https://jsfiddle.net/0g8w43a1/

This code works perfectly fine:

$("#object").autocomplete({
    onHint: true,

    lookup: ['foolish', 'footage', 'footing']
});

But this one throws an error when using tab to select the hint:

$("#function").autocomplete({
    onHint: true,

    lookup: function(query, done) {
        done({
            suggestions: [
                    { value: 'foolish' },
                     { value: 'footage' },
                    { value: 'footing' }
            ]
        });
    }
});

And here is the actual error:

jquery.autocomplete.js:938 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at Autocomplete.onSelect (jquery.autocomplete.js:938:58)
    at Autocomplete.select (jquery.autocomplete.js:866:18)
    at Autocomplete.selectHint (jquery.autocomplete.js:860:18)
    at Autocomplete.onKeyPress (jquery.autocomplete.js:408:30)
    at HTMLInputElement.<anonymous> (jquery.autocomplete.js:212:68)
    at HTMLInputElement.dispatch (jquery-3.6.0.min.js:2:43064)
    at HTMLInputElement.v.handle (jquery-3.6.0.min.js:2:41048)

Let me know if I can help in any way.

tkirda commented 2 years ago

Feel free to submit a PR if you know what is the issue.

Woet commented 2 years ago

There are a few dozen pull requests dating back for years that haven't received feedback nor have been merged, so I'm not sure if submitting a PR is useful. :)

For now, I've changed the selectHint version to the following which resolved the issue for me:

selectHint: function () {
    var that = this,
        i = $.inArray(that.hint, that.suggestions);

    i = Object.values(that.suggestions).findIndex(suggestion => suggestion.value == that.hint.value);

    that.select(i);
},