plain html combo box code

Question

I've searched online and didn't find even one example of a combo box which could be rendered using plain HTML and Javacript.

Is it possible to have a combobox using standard HTML and Javascript? By combo-box, I mean where input is also possible and a drop-down options are also possible - in a single element. I'm not looking for one select box and in addition another input box.

An example of what I'm looking for is:

https://demos.telerik.com/kendo-ui/combobox/cascadingcombobox

However, I don't want to use any Javascript library like jQuery.

brk · Accepted Answer · 2018-03-09 03:48:16Z

1

Seems you are looking for datalist.

datalist is an html5 component. This same feature can be created using input box and ul, li elements

<label for="countries">Choose a Country:</label>
<input list="countryList" id="countries" name="countries" />
<datalist id="countryList">
  <option value="India">
  <option value="France">
  <option value="Isreal">
  <option value="USA">
  </datalist>

answered Mar 9, 2018 at 3:48

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gavgrif Over a year ago

I agree that he siolution is a datalist - however it should be noted that there is limited browser support for it (eg: Safari does not render it). There is a polyfill that could be used for incompatible browers - just thought it worth mentioning. And also given that its a html5 element - the doctype needs to reflect HTML5.That said - the data-list rocks.

RRM Over a year ago

Thanks for the code. I tried it using earlier from another stackoverflow answer. Somehow, it didn't work on IE at my office desktop. However, I see now that it works on Firefox, Chrome and IE.

RRM Over a year ago

@gavgrif thanks for your suggestion. Could you please post a working code snippet as brk has done?

gavgrif Over a year ago

RRM - any suggestion i would make has already been posted by @brk - its the right way to do it - then you just have to account for the older browsers etc - search for datalist polyfill and in clude it in the page.

Collectives™ on Stack Overflow

plain html combo box code

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related