With lots of help from PaulOB of the Bootstrap forum, I’ve been working on including Google Search into a Bootstrap Dropdown menu. However, we’ve run up against a problem and it has been suggested I post in the JS forum for further help and advice.
Here is the link to the thread in the Bootstrap forum.
Paul explains that while I can add the Google Search to my Bootstrap Dropdown menu . . .
"There is a problem though because the menu will close when you click the search and there will be nowhere for the results to display. I’m not sure there is an easy way around that. I assume that you will need to stop the bootstrap menu from closing when the area outside is clicked.
I’ve added some js to do that but now you can only close the menu from the menu button itself. This is probably a question for the JS forum now if you wish to pursue further options of that behaviour."
Can anyone suggest a way for Google Search to be added to a Bootstrap Dropdown munu without the problems we are having?
Any advice and code examples are gratefully received.
I am still a bit foggy on what you are trying to accomplish. You want to click the drop down, type something in search, hit the button and then what to happen? For the search results to show in the rest of the page while keeping the menu open?
Hello Martyr2. Please accept my apologies for not replying sooner. I went offline yesterday evening shortly after posting and have only just returned.
I decided to place a search in the dropdown to save space at the top of my page.
PaulOB has been helping me with this.
From my understanding, and I’m not an expert, when the search button is pressed the menu disappears and there is then nowhere for the search results to be displayed.
As a workaround, Paul has added some JS to keep the menu open when the search is pressed so results have somewhere to be displayed, but this JS then stops the menu from being closed again in what I imagine would be the usual way.
I’m guessing that perhaps on mobile you can swipe the menu closed, but that you can only now close the menu by clicking on the dropdown arrow.
I’ll go back and ask Paul if he can elaborate on how, in his opinion, the menu should work and what he considers needs improvement.
Which is fine because you want to see the results and for the menu to stay open (which is caused by the js i added).
If you close the results or click the backdrop the menu still stays open so you can search again which I think is good.
However the points that need to be addressed is that if you :
a) click a menu item the menu doesn’t close and it should.
b) if you click anywhere outside the menu it should also close (but not when results are displayed).
The js I added stops the menu closing when the search is in effect but creates the issues a & b above.
The results don’t need to be moved as they are fixed positioned anyway but I did adjust the css for them to display better.
The dropdown menu will only be prevented from closing if you close the google overlay. Any other situation it should behave normally.
There might be a simple alternative to the route I took, but in the end I used mutationObserver to check whether the overlay was visible. If the overlay was visible then prevent the bootstrap’s dropdown hide using Jquery’s one function.
Using Jquery’s one function will prevent the default hide behaviour only once each time the google search overlay appears. Therefore closing the google modal will not trigger bootstraps hide function.
Not sure how bulletproof this is but it appears to work in this small example.
Note: I could not figure out why addEventListener wouldn’t work with hide.bs.dropdown. Apparently using vanilla JS to do this is only available in Bootstrap 5+
Thank you, rpg_digital. I’ve read through everything you’ve written, taken a look at the Pen, and at the HTML, CSS, and JS. It looks like this covers all bases and so I’ll have a go at integrating this into my page and see how it functions. I’ll post back over the next day or so to let you know how I get on. Your time and effort is appreciated.
I’m seeing an issue in that when you make a search and then select the item you want with the mouse from the selection available the menu closes and the search results are hidden. You can only see the search results by going back and opening the menu.
If on the other hand you make a search and then use the arrows and press enter then the menu doesn’t close and the results stay visible - which is the desired result.
What you are saying is if for instance you type in ‘term’, a predictive list comes up with say ‘terminator’, ‘terminator2’ etc. If you then click on say terminator2, the whole menu disappears. Is that correct?
Edit:
So that needs to be addressed too? I think I may well have misinterpreted your comment.
As you are the experts, and based on your latest posts I’m going to hold off on integrating the changes into my page until you’re certain all is as it should be. And thanks again in advance for all of your help and support with this.
Ok, I think we are getting closer. The mutation observer stuff can be scrapped.
Instead we can look at which element was clicked on, and traverse up the DOM (look at it’s parents) to check for a common parent element using elem.closest().
So if we click in the overlay it has a wrapping parent element of .search-wrapper. The auto complete was a bit more work — it’s in the DOM and then on a click it’s gone.
The text options that come up, terminator etc, have a common parent of .gsq_a and the powered by google image has a parent of .gssb_a. No common parent for those two, that I can see and nice user friendly names
Bringing it together (Essentially full circle back to Paul’s script)
$('.dropdown').on('hide.bs.dropdown', function (event) {
// Jquery's clickEvent.target is the element clicked on
const elem = event?.clickEvent.target
// closest allows for multiple comma separated selectors
if (elem?.closest('.search-wrapper, .gsq_a, .gssb_a')) {
event.preventDefault();
}
})
Thanks PaulOb and rpg_digital for your help with this. I’ll integrate the code from your most recent Pen into my page and post back to let you know how I get on.
In reply to your thread in the css forum it is more appropriate to post here as it requires some help with the JS again.
I have uploaded your whole working page into the codepen and inserted the search code.
It is basically working but there are errors showing in the console and because you have two drop downs on this page there is a behaviour problem.
When the menu is open it needs a) to be able to be closed by clicking the ‘more Info’ button again or indeed if clicking the other menu item (info) the search dropdown should close. (Both a and b refer to before the search input has been activated as that part is working ok).
Hopefully this is something that @rpg_digital will have an idea how to solve.
Note regarding the html and css I added two classes to the html to make the css and search work.
Thanks, Paul. I’ll wait on making any changes in the hope that @rpg_digital will see this post and reply with solutions to overcome the issues due to there being 2 dropdowns on the same page, and the behaviour issues you mention.
