Dropdown-menu with key input scroll listed items

Question

1.00/5 (1 vote)

See more:

, +

I need your valuable suggestions and guidance to help me get out of this tricky situation.

I have a scenario, where I need to build a Dropdown like the below one.

<ul class="dropdown">
<li><a href="#">America</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">Egypt</a></li>
</ul>

The desired functionality is that I should be able to use keyboard input to scroll through the items, lets say i press key "E" on my keyboard it should hover/focus on Egypt.

I realize this functionality cant be achieved using UL>Li, However we can use Select tag to implement this functionality.

<select class="dropdown">
<option>America</li>
<option>Brazil</li>
<option>China</li>
<option>Denmark</li>
<option>Egypt</li>
<select>

But when we use select tags, we cannot style the dropdown, Especially like CSS padding doesnt work on select tag dropdowns on most broswers.

All I wanna ask Is, How can I build a drop-down with these 3 functionalities :

1.Open on Tab key press
2.Browse listed items using key input.
3.Style the dropdown for cross broswer compatibility.

I did spend ample time in finding a solution for this online, I dint find any perfect solution apart from this plugin

https://silviomoreto.github.io/bootstrap-select/

I'd regret to say that I'm not allowed to use any external plugins at work.To achieve this only tools I'm allowed to use is Bootstrap,jQuery,Javascript,CSS,HTML and no angularjs.

Can anyone help me with this.

What I have tried:

Tried using Html and jquery and also tried using select tags and styling doesn't work !

Posted 1-Apr-16 11:06am

Sandeep.Codemode

Add a Solution

Comments

Sergey Alexandrovich Kryukov 1-Apr-16 21:50pm

Strange requirements. Nothing should "open" on Tab. Tab is reserved for navigation between elements which can get focus. Handling Tab or Shift+Tab in any other way would be hostile against you users.

There is no "open". What is it supposed to mean? If you mean "drop-down", it already happens on Alt+Down, again, standard behavior. Overall, "select" is a good choice. Yes, by default it behaves as drop-down. Who told told you cannot style it? You can style everything.
It's not clear what is "styling for cross-browser compatibility".

What do you mean by "plugins"? It you mean browser plugins, you cannot "use" them in principle, because its not under the control of a Web developers. And all those jQuery and other libraries don't add any functionality, ever, just maybe some convenience. Strictly speaking, it does not matter if you use them or not.

—SA

Sandeep.Codemode 4-Apr-16 11:54am

Hi Sergey!

Thanks for your prompt response.

Let me address your suggestions, Its not my requirement its a client requirement and I can explain them how things work, I even tried to educate them that this requirement is a technical limitation, However client says you are hired to solve tricky solutions so instead giving reason he wants me to give him results.

Styling : When using select tags to build dropdown you can open the dropdown menu using tab by giving tab index, Tab functionality is to make sure of accessibility, I know select tags can be styled, The problem comes when you give padding, Chrome and safari doesn't show the exact padding given it takes extra padding and also adds vertical padding to each element, The style of the same dropdown looks different in each browser which is kind of weird

Try this code in different browsers and see how it looks :
//html
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

//css
select option {
padding:10px 0px 0px 10px;
}

When I mean plugins - I mean jquery and bootstrap plugins that are available to solve multiple purposes, just like angular-file upload plugin or jQuery animation plugin. there is a bootstrap plugin that I've found online which solves my purpose, but these are not opensource and copyrighted, which prohibits me from using them.

https://silviomoreto.github.io/bootstrap-select/

I hope you were able to understand my situation and what Im exactly trying to do.

Sergey Alexandrovich Kryukov 4-Apr-16 13:03pm

I'm sorry for you. It sounds as a kind of client you just probably cannot work with. You see, sometimes it's better to lose a client, because some are useless, will just eat up your time instead of paying money. It's impossible to help each and every moron. Yes, I understand that it can be very difficult...

One of the worst myths, a way to ruin a business, is the "client's always right" conception. I sometimes say that it was coined by successful companies to eliminate some competitors.

—SA

Sandeep.Codemode 4-Apr-16 14:45pm

Sounds like a plan ! I'll see what I can do with my situation and keep you posted.

Agreed, that some clients are impossible to convince, and we always have a perception that a client is always right. I just don't want to loose my reputation with the client, so trying hard if I can get this work with any alternative.

I appreciate your response and thanks so much for your patience and understanding in replying to my question, Sergey!

Would love to work with you for any of my future concerns.

Sergey Alexandrovich Kryukov 4-Apr-16 15:24pm

You are very welcome; I think you have right approach.
—SA

Karthik_Mahalingam 2-Apr-16 1:15am

what issue in styling?

Sandeep.Codemode 4-Apr-16 11:57am

Hi Karthik !

The styling Issue that I have is that when I give padding top bottom to select and options, Line height and option height it doesn't reflect the value that it was given. I learnt that chrome browser doesn't support user styling for select dropdown padding. Also the styling for this select menu isn't consistent through all the browsers which is a main drawback.

For your reference, you can try this code in different broswers :
//html
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

//css
select option {
padding:10px 0px 0px 10px;
}

Thanks again!

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)