xcash/bootstrap-autocomplete

Uncaught TypeError: this._dd is undefined

Opened this issue · 1 comments

Describe the bug
snippet from by base.js

Uncaught TypeError: this._dd is undefined
selectFocusItem webpack:///./src/dropdown.ts?:316
bindDefaultEventListeners webpack:///./src/main.ts?:149
jQuery 8
bindDefaultEventListeners webpack:///./src/main.ts?:143
init webpack:///./src/main.ts?:126
AutoComplete webpack:///./src/main.ts?:67
$.fn[AutoCompleteNS.AutoComplete.NAME]/< webpack:///./src/main.ts?:353
jQuery 2
AutoCompleteNS.AutoComplete.NAME webpack:///./src/main.ts?:349
http://localhost:8888/js/base.js:269
jQuery 13
bootstrap-autocomplete.min.js line 1 > eval:316:9
selectFocusItem webpack:///./src/dropdown.ts?:316
bindDefaultEventListeners webpack:///./src/main.ts?:149
jQuery 8
bindDefaultEventListeners webpack:///./src/main.ts?:143
init webpack:///./src/main.ts?:126
AutoComplete webpack:///./src/main.ts?:67
$.fn[AutoCompleteNS.AutoComplete.NAME]/< webpack:///./src/main.ts?:353
jQuery 2
AutoCompleteNS.AutoComplete.NAME webpack:///./src/main.ts?:349
http://localhost:8888/js/base.js:269
jQuery 13

To Reproduce
error occurs using jQuery:

$('.postalCodeAutoComplete').autoComplete({
    formatResult: function (item) {
        return {
            id: item.baseIdentity.id,
            value: item.postalCode,
            text: item.postalCode + " " + item.townName,
            html: [$('<b>').text(item.postalCode), ' ', item.townName
            ]
        };
    }
}).on('autocomplete.select', function (evt, selectedTown) {
    const fld = $(this);
    fld.val(selectedTown.postalCode);
    const townfld = $('[name="' + fld.attr('id').replace('.postalCode', '.city') + '"]');
    townfld.val(selectedTown.townName);
    checkField(townfld);
    const townIdfld = $('[name="' + fld.attr('id').replace('.postalCode', '.townId') + '"]');
    townIdfld.val(selectedTown.baseIdentity.id);
    populateSuburbs(fld.attr('id'), selectedTown);
});

Expected behavior
No error respective a reason what may be missing

Desktop (please complete the following information):
FF on Mac OS, backend Spring boot

You may test it online on demand.

I hit this myself just now and found that it's due to not including the bootstrap script itself. I copied the bootstrap include from the index.html example in the repo and was able to move past (the CSS is really messed up for me at the moment but I'm past this, it's working, and I think I can get the CSS resolved by other things).

The example line I copied from the repo:

<script src="//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

I also had an issue with needing to include JQuery prior to this.

These things are likely obvious to most people who go to use bootstrap-autocomplete, but I'm a backend developer, so while I can recognize it should have been obvious to me, adding a line in the documentation to specifically say this is probably a good idea.

I may get around to making the one or two line doc PR to add that.