Menu icon Foundation
Help creating a "combo box"

Ultra-new to Foundation (and somewhat to css in general too) and trying to create a "combo box" widget (using Foundation 6 for Sites). This is something like a text input field with a Dropdown Menu attached.  My use is for a search box but there is a set of "common searches" that I want the user to be able to select from a list if they want, or they can type in free-text instead. The look I'm after is something like this:

Combo Box mockup

I've tried creating a Dropdown menu to the right but had a lot of trouble getting it to close when it lost focus (it should close when the user clicks in the search box or anywhere else on the page - or even after the user clicks an option in the drop-down area for that matter. The drop-down area should only appear when the user clicks the down arrow to the right of the search field, and should also close again if the user clicks it a second time (ie: toggle)

I'd also be keen to have the drop-down arrow inside the search field as shown above, where any text typed in the box doesn't quite extend to the end so can't be typed over it - not sure how to achieve this though.

There seems to be several ways to go about this and I'm not sure which is best so any input to steer me in the right direction would be greatly appreciated!

combo-box

Ultra-new to Foundation (and somewhat to css in general too) and trying to create a "combo box" widget (using Foundation 6 for Sites). This is something like a text input field with a Dropdown Menu attached.  My use is for a search box but there is a set of "common searches" that I want the user to be able to select from a list if they want, or they can type in free-text instead. The look I'm after is something like this:

Combo Box mockup

I've tried creating a Dropdown menu to the right but had a lot of trouble getting it to close when it lost focus (it should close when the user clicks in the search box or anywhere else on the page - or even after the user clicks an option in the drop-down area for that matter. The drop-down area should only appear when the user clicks the down arrow to the right of the search field, and should also close again if the user clicks it a second time (ie: toggle)

I'd also be keen to have the drop-down arrow inside the search field as shown above, where any text typed in the box doesn't quite extend to the end so can't be typed over it - not sure how to achieve this though.

There seems to be several ways to go about this and I'm not sure which is best so any input to steer me in the right direction would be greatly appreciated!

Rafi Benkual about 3 years ago

Hi Aaron,

This seems like a common enough pattern that could be made to work. Is it for a sort of Autocomplete? 

Seems similar to the search on the docs here: http://foundation.zurb.com/sites/docs/

 

Just whipping something up quick: http://codepen.io/rafibomb/pen/pENdBWhttp://codepen.io/rafibomb/pen/pENdBW

Zuur about 3 years ago

Thanks very much Rafi - looking forward to it :)

One of the main uses for a combo box in general is to display history - ie: "type what you want here, or click the down-arrow to see what you've typed in the past in case you want to use that again"...

I've also just noticed that GMail has exactly what I'm looking for with their search box at the top of the mail page - it's just a regular search box but you can click a down arrow to "open it up" and get more search options.

My use it a little different again, but probably most similar to the first use, ie: "type anything you want here or check out some good options below".

I also noticed the "Recent Activity" and "All Frameworks" buttons at the top of the Forum page here which I thought I might be able to learn from - they would just need the ability to type into them as well.

I'll keep playing, but very very keen to see what you come up with, as all my attempts so far have run into various road blocks.

Jay Thatcher over 2 years ago

An Auto-Complete dropdown box is something our team needs weekly. Adding jquery-ui or telerik controls adds a ton of css to contend with. Some developers are going the nuclear option of using Angular or React for the entire project, when html, css, and a simple auto-complete control would have made the project much simpler. 

Is this a component Zurb has had to solve before? Would love to see a Building Block or Playground of an auto-complete (combo box) dropdown that utilizes Foundation styling.