xcash / bootstrap-autocomplete

Bootstrap Autocomplete
MIT License
168 stars 71 forks source link

Uncaught TypeError: this._dd is undefined #122

Open 4braincells opened 3 years ago

4braincells commented 3 years ago

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: [$('').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.
shaun-emburse commented 3 years ago

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.