Implementation for bootstrap 5

[vpusher]

This component is working well for bootstrap 3 and 4. It would be cool to integrate with Bootsrap 5 which is currently in Beta and plan to release for summer.

[xcash]

Indeed, It is planned. :)

[masonoise]

I'm wondering if this is why it's not working for me? I'm getting an error when trying to set autoComplete on an input field:

Uncaught TypeError: Cannot read property 'Constructor' of undefined
    at t.getBootstrapVersion (bootstrap-autocomplete.js:383)
    at t.init (bootstrap-autocomplete.js:395)
    at new t (bootstrap-autocomplete.js:373)
    at HTMLInputElement.<anonymous> (bootstrap-autocomplete.js:503)
    at Function.each (jquery.js:328)
    at jQuery.fn.init.each (jquery.js:168)
    at jQuery.fn.init.t.fn.<computed> [as autoComplete] (bootstrap-autocomplete.js:501)

And it looks like the issue is the t = $.fn.button.Constructor.VERSION.split(".").map(parseInt) when trying to determine the version. So it's not going to work for Bootstrap 5 right now, I guess.

[Dacesilian]

Indeed, It is planned. :)

Hello, do you have any progress on it? It should be only small changes:) Thanks!

[xcash]

Hi @Dacesilian i'm very busy right now irl and at work. I hope to release it soon. I need BS5 support too... :)

[yoru74]

Hi, thank you for this nice package. I'm using it with Bootstrap 5 by just modifying the line: if (this.getBootstrapVersion()[0] === 4) { with: if (this.getBootstrapVersion()[0] === 5) {

just by editing the bootstrap-autocomplete-2.3.7.min.js file, and is seems to work fine (I'm using it with Ajax callbacks).

The class names for dropdowns have not changed from BS4, so I'm not surprised it works.

For those who would like to try, the string to change in the min.js file is: ',4===this.getBootstrapVersion()[0]?', just change the 4 by 5.

[xcash]

Hi @yoru74

I've made some fixes in the v300 branch ( https://github.com/xcash/bootstrap-autocomplete/tree/xcash-v300 ) which supports BS5. You might try it. :)

[hcuk94]

Hi, thanks for your hard work including on updating this to be BS5 compatible. I'm using the dev/latest CDN include.. should this have the BS5 compatibility updates of the v300 branch?

[yoru74]

Thank you for the v300 branch. I just tested it on my application and it works fine. My framework is Django on the serverside with BS5 and your autocomplete. Everything works for me.

[xcash]

Nice to hear it :) I will push it soon to master. It evicts support for BS3

[jcoliz]

Hi there, I just wanted to say I just tested xcash-v300 (5f19ced2) against my application as well, and works great. Thanks for bootstrap-autocomplete. Great stuff!

[yoru74]

One detail for the documentation. It is trivial, but can save time. To change the color of the matching part of the menu entries, it is enough to add this to CSS:

.bootstrap-autocomplete b {
    color: red;
}

[xcash]

Feel free to create a doc pull request on that :)

Documentation is sometimes harder than code for developers.... ;_;

Il giorno mer 11 ago 2021 alle ore 10:30 yoru74 @.***> ha scritto:

One detail for the documentation. It is trivial, but can save time. To change the color of the matching part of the menu entries, it is enough to add this to CSS:

.bootstrap-autocomplete b { color: red; }

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/xcash/bootstrap-autocomplete/issues/108#issuecomment-896618868, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHIYZ4QUXGHZXG36KHXNDDT4IYIRANCNFSM4XYCRQGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

[yoru74]

You are right, documentation is hard! :-) I just wrote the pull request.

[scuml]

@xcash Please tag and release. Thanks.

[zanollim]

@xcash Please tag and release. Thanks.

Yes please, autocomplete is very, very powerful! Thanks

[xcash]

Yes. I'm facing a problem with the webpack pipeline. I Hope to release soon

Il lun 23 mag 2022, 20:35 zanollim @.***> ha scritto:

@xcash https://github.com/xcash Please tag and release. Thanks.

Yes please, autocomplete is very, very powerful! Thanks

— Reply to this email directly, view it on GitHub https://github.com/xcash/bootstrap-autocomplete/issues/108#issuecomment-1134953865, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHIYZYMGLXFYFB5PXP5DLDVLO6VRANCNFSM4XYCRQGA . You are receiving this because you were mentioned.Message ID: @.***>

[jjshaw]

I understand you are working on it and I respect that we have no right to put any pressure on but willing to buy you dinner if you can get it done in the next few weeks ;) It would help me massively with a new project.

[xcash]

@jjshaw in the meanwhile you can start the project using the v300 branch. It's in production in my day to day work since last year. I don't plan any disrupting changes in the final release. :) Let me know if it is a viable option meanwhile I find the time to resolve the webpack upgrade issues and release a final v3.0.0.

https://raw.githack.com/xcash/bootstrap-autocomplete/xcash-v300/dist/latest/indexV5.html

[yoru74]

For me v300 has been working fine for a year now.

Carlos

On Fri, Jun 24, 2022 at 9:16 AM Paolo Casciello @.***> wrote:

@jjshaw https://github.com/jjshaw in the meanwhile you can start the project using the v300 branch. It's in production in my day to day work since last year. I don't plan any disrupting changes in the final release. :) Let me know if it is a viable option meanwhile I find the time to resolve the webpack upgrade issues and release a final v3.0.0.

https://raw.githack.com/xcash/bootstrap-autocomplete/xcash-v300/dist/latest/indexV5.html

— Reply to this email directly, view it on GitHub https://github.com/xcash/bootstrap-autocomplete/issues/108#issuecomment-1165277417, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB3DCSXZSCBRHQWNL3NNTIDVQVODHANCNFSM4XYCRQGA . You are receiving this because you were mentioned.Message ID: @.***>

[monetschemist]

Trying to use the v300 branch with jquery-3.6.1 and bootstrap 5.2.2.

I get this error

Uncaught TypeError: $.fn.button is undefined

referring to line 96 in bootstrap-autocomplete.js which looks like this

var versionString = $.fn.button.Constructor.VERSION;

I see in the Bootstrap docs here https://getbootstrap.com/docs/5.2/getting-started/javascript/#optionally-using-jquery that there is some discussion of using this

const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

and then I suppose replacing all references to fn.button with fn.bootstrapBtn. But I'm not at all clear if this is relevant.

Any advice would be greatly appreciated.

[monetschemist]

In case anybody else ends up here, I gave up on Bootstrap 5.2.2 and ended up back at jQuery 3.6.1, Bootstrap 4.6.2 and pulling bootstrap-autocomplete 2.3.7/dist/latest/autocomplete.min.gs from cdn.jsdelivr.net.

This means taking on more technical debt than I wanted but oh well. @xcash I thank you for making this excellent functionality available and hope that you may find some time in the future to finish moving to Bootstrap 5.2+

[xstever]

Any update on this with VS 5.2.2 support ?

[pmehlb]

Just stopping by to let the next person who sees this know - I have it working for Bootstrap version 5.2.3 and jQuery version 3.6.3. CDN link can be generated from JSDelivr (in case there's a change of branch), or grab the one I'm using.

$('#autocomplete').autoComplete({
  resolver: 'custom',
  events: {
    search: function(query, callback) {
    $.get("/query_url/" + query)
      .done((res) => {
        callback(res.suggestions);
      })
      .fail((err) => {
        console.error(err);
      });
    }
  }
});

Custom styling needs to be added to a.dropdown-item for font sizing (if you're using a .form-control-lg).

[chadboettcher]

Just stopping by to let the next person who sees this know - I have it working for Bootstrap version 5.2.3 and jQuery version 3.6.3. CDN link can be generated from JSDelivr (in case there's a change of branch), or grab the one I'm using.

$('#autocomplete').autoComplete({
  resolver: 'custom',
  events: {
    search: function(query, callback) {
    $.get("/query_url/" + query)
      .done((res) => {
        callback(res.suggestions);
      })
      .fail((err) => {
        console.error(err);
      });
    }
  }
});

Custom styling needs to be added to a.dropdown-item for font sizing (if you're using a .form-control-lg).

I'm trying to use this and I can see the dropdown-menu created in the document after I type something, but I can't get the list to show up in the UI no matter what I do.

[programsam]

I have to say that this version https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@xcash-v300/dist/latest/bootstrap-autocomplete.min.js works GREAT for my use case. Please deliver this change! It's wonderful for Bootstrap v5!

[ahawes-clarity]

@xcash Thanks so much for this. Very well done.

I used the JSDelivr CDN links like above.

[oliver681]

To save someones time:

Seems like you have to specify bootstrapVersion: '5' in the configuration object, otherwise the Uncaught TypeError: $.fn.button is undefined error will still occur. For me it works fine if its specified. :)