Adding a search box to a drop-down

HTML & CSS
1

I am trying to add a search box to an existing navigation drop-down in Bootstrap. I’d like the search box to always appear at the top of the drop-down list and for the exact styling of the search box to be easily customizable using CSS. Here is the code for my existing navigation drop-down:

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" title="More Info" style="color:white;" onMouseOver="this.style.color='#e0dcdc'"
   onMouseOut="this.style.color='#ffffff'" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More Info</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<!--<div class="dropdown-divider"></div>-->
</div>
</li>

Please can anyone share HTML examples of how this can be achieved, and whether styling for this should be inline, or external?

I already have an example of code for the search box but don’t know if this would integrate properly as there are perhaps better options.

 <li>
    <div class="input-group mt-2 mx-2">
      <div class="form-outline w-auto">
        <input type="search" id="form1" class="form-control-dropdown" />
        <label class="form-label" for="form1">Search</label>
      </div>
    </div>
  </li>

Any advice would be appreciated.

2

It’s more or less as you have it already with the html for the input at the top of the dropdown. I just dropped this into a bootstrap codepen with some basic styling but feel free to change as required.

Styling should almost never be inline unless there’s a good reason for it. Use external css and add your own classes to modify bootstrap components rather than directly styling bootstrap elements.

3

Hi Paul, and thanks very much for your help with this. I’ll integrate the code you suggest into my dropdown and also into my external stylesheet and will post back here again to let you know how I get on.

1 Like
4

Okay. I’ve integrated the HTML and CSS and now have a search box at the top of my drop-down list which is just what I wanted. Thank you. Is there a way for me to position the word ‘search’ as appears on the right-hand side and outside of the search bar inside of the search bar instead, perhaps in a lighter grey colour, so this looks like an example of something already having been entered, and this can then be removed by the user when they enter their own search term? Perhaps it might be possible to add a small button in place of the word ‘search’ as appears outside of the bar on the right-hand side to click on to start the search?

5

You can replace the label with a button and style it as you wish.

I would still call it search though as you have removed the label and a placeholder is not accessible enough. I also added the aria and role attributes to the form and input for better accessibility.

The styling is up to you and you should be able to change as you wish.

6

Thanks for the additional info. I’ll post back here again to let you know how I get on once I’ve made the alterations. In the meantime, just to let you know that your help is appreciated.

1 Like
7

As promised, just posting back to let you know that I made changes and everything looks good.

Following on from this, please can you offer any advice as to how I would integrate the following code into my existing search so as to make it actually work?

Here is my existing code

<div class="input-group">
<div class="form-outline w-auto">
<input aria-label="Search" type="search" id="form1" class="form-control-dropdown" placeholder="Search">
<button type="submit" for="form1">Search</button>
</div>
</div>

and here is the code that I need to integrate

<form action="http://www.hypnosisdownloads.com/cgi-bin/sgx2/asearch.cgi" method="post">
<input type="hidden" name="a" value="2871!search">
<input style="margin:4px 0 0 0;width:227px !important;height:24px !important;font-size:16px !important;border:1px solid #eeeeee;-webkit-box-shadow:0px 0px 4px #eeeeee;-moz-box-shadow:0px 0px 4px #eeeeee;box-shadow:0px 0px 4px #eeeeee;" name="query" value="" type="text" placeholder="e.g: &quot;confidence&quot;,">
<span class="input-group-btn" style="float:right;margin:0 0 0 -66px;">
<button class="btn-u" name="submit" type="submit">Search</button>
</span></form>

Please are you able to suggest which parts of the second block I’d need to move into the first block to make it work, and where I’d paste these in?

Thanks in advance for any further help you might be able to provide.

8

Just quickly to add that the code to be integrated points to another website, and if I wanted to swap this out with Google search so as to be able to search my own website, which would probably be a better option, how would I do that?

9

This is the section of code I used some years ago to run Google search on a previous website.

<div class="search">
<div class="cse-branding-bottom" style="background-color:#FFFFFF;color:#000000">
<div class="cse-branding-form">
<form action="http://www.google.co.uk/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-0179" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="16" />
<input type="submit" name="sa" value="Search" />
<input type="checkbox" name="sitesearch" value="abc.co.uk"/>
search this site only
</div>
</form>
</div>
<div class="cse-branding-logo">
<img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />
</div>
<div class="cse-branding-text">

and I’m guessing that if I go grab updated code from Google it would be similar to this.

Would it be a simple matter to integrate this into my existing search setup because this would be my preferred choice.

10

I suggest you get your search function working first with the html that you will actually be using and once that is working it can then be placed where you need it to go and then styled accordingly.

That last html you posted can more or less replace the current search code anyway with some minor tweaks depending on look.

11

Thanks, Paul. I’ve logged in to Google and asked it to create a custom programmable search engine for my site. It says to ‘Copy the following code and paste it into your site’s section, where you want the search box and the search results to render.’

<script async src="https://cse.google.com/cse.js?cx=f540123c9808f402c">
</script>
<div class="gcse-search"></div>

Please can you help me with exactly where to integrate this into my existing code while preserving a similar look and feel to what we already have?

12

You can add the code into the drop down as mentioned above but you will need to add some styles to change the look.

I’ve added it to this codepen.

Screen Shot 2023-06-03 at 17.01.19

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 a 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.

13

Thank you once again for all your help with this. Following your advice I’ll go give this a try and see how I get on. I’ll also post in the JS forum to see if there are any other suggestions. I’ll post back to let you know how things progress.

1 Like
14

Hi Paul. I posted the question in the JS forum and have received this reply. Please can you explain again what should happen when the search button is pressed and how the menu should ideally behave? I’ll then post this back to the other thread. Thanks.

[Martyr2] (https://www.sitepoint.com/community/u/Martyr2) Former Member of the Month

12h #2

“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?”

15

I haven’t read the whole thread now, but why don’t you use something like „Tom Select“ or „Select2“?

16

I have replied in the other thread :slight_smile:

17

Thanks, Paul. I’ll keep my eye on both threads and see if anyone else can offer solutions. I’ll stay in touch. I appreciate all of your time.

1 Like
18

Hello again, Paul. I wonder whether you’ve seen the latest answer in the other thread and if you think this will cover the issues you were concerned about. If you think it will, I’ll go ahead and try integrating this into my page to see how it functions.

19

Following previous posts, I’ve been experimenting with this on the page with the prototype carousel that you helped me with a week or two ago.

I’ve been doing my best to integrate the changes suggested yesterday into my existing HTML and CSS code but have not been able to get the search box to display properly or to work as intended.

Totally confused I’ve rolled back to a page including navigation as it was originally and before any changes for the search box were made.

Not having your level of knowledge and expertise when it comes to such matters, I think perhaps I’m confused due to there being so many versions of the code in various Code Pens, and I’m not exactly sure in terms of HTML and CSS what should stay, what should go, and what should be changed for the search box to appear and work properly, and while not having any negative impact on the rest of the existing navigation, it’s HTML and CSS.

Also, in the latest Pen, there is JS, and I’m not sure whether to include this between script tags directly on the same page or link to it externally.

And then there’s the link to Google which now appears above the code for the dropdown. Is this where it should be placed to work properly?

Before I pull out what little hair I have left remaining, I’ve included a link https://cleardirectionhypnotherapy.co.uk/carousel.html to the carousel page and hope you might be able to copy/paste the relevant section/s of my existing HTML and show this in the forum both before and after the updates have been made and to do the same with the CSS. I can then copy and paste these sections back to my carousel page and CSS and see if it works.

Of course, I realise how much time you’ve invested in helping me already, and I’ll understand if you’re not able to continue.

20

I have replied in the other thread as it is more appropriate and requires more JS help.

I probably won’t be around until tomorrow afternoon now as I have to go out this evening and in the morning.:wink: