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:
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!