Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implementation for bootstrap 5 #108

Open
vpusher opened this issue Feb 17, 2021 · 27 comments
Open

Implementation for bootstrap 5 #108

vpusher opened this issue Feb 17, 2021 · 27 comments
Assignees
Milestone

Comments

@vpusher
Copy link

vpusher commented Feb 17, 2021

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 xcash self-assigned this Feb 17, 2021
@xcash xcash added this to the 3.0.0 milestone Feb 17, 2021
@xcash
Copy link
Owner

xcash commented Feb 17, 2021

Indeed, It is planned. :)

@masonoise
Copy link

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
Copy link

Indeed, It is planned. :)

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

@xcash
Copy link
Owner

xcash commented Jun 18, 2021

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

@yoru74
Copy link

yoru74 commented Jul 28, 2021

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
Copy link
Owner

xcash commented Jul 29, 2021

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
Copy link

hcuk94 commented Aug 1, 2021

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
Copy link

yoru74 commented Aug 2, 2021

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
Copy link
Owner

xcash commented Aug 5, 2021

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

@jcoliz
Copy link

jcoliz commented Aug 6, 2021

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

@yoru74
Copy link

yoru74 commented Aug 11, 2021

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
Copy link
Owner

xcash commented Aug 11, 2021 via email

@yoru74
Copy link

yoru74 commented Aug 11, 2021

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

@scuml
Copy link

scuml commented Apr 6, 2022

@xcash Please tag and release. Thanks.

@zanollim
Copy link

@xcash Please tag and release. Thanks.

Yes please, autocomplete is very, very powerful!
Thanks

@xcash
Copy link
Owner

xcash commented May 24, 2022 via email

@jjshaw
Copy link

jjshaw commented Jun 23, 2022

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
Copy link
Owner

xcash commented Jun 24, 2022

@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
Copy link

yoru74 commented Jun 24, 2022 via email

@monetschemist
Copy link

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
Copy link

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
Copy link

xstever commented Dec 13, 2022

Any update on this with VS 5.2.2 support ?

@pmehlb
Copy link

pmehlb commented Feb 16, 2023

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
Copy link

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
Copy link

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
Copy link

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

I used the JSDelivr CDN links like above.

@oliver681
Copy link

oliver681 commented Sep 22, 2024

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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests