2

I have a menu of reference information, like below.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The above fields are progressively pre-populated by the system, and user has to just select the value. Specifically i.e. user selects reference Order, like 123, based on that information, reference Job field is populated. User selects something like 22, and based on that field, reference Serial combo box is populated.

That is working great, except in situations when i.e. Serial or Job or Order have not yet been entered into the system, or are so old that they are legacy (and are not in the system).

In those cases user needs to be able to enter their own values into all the boxes.

How can that be done when Combo Boxes (in my case HTML select box) cannot take user input?

Ideally same names (i.e <name="ref_serial"> in HTML) should be reused for the manual input.

  • 1
    Are you asking how to implement something like what you are describing, or if there is some design pattern you can utilize? – Tory Nov 2 '16 at 19:32
  • 1
    asking if there is a design pattern for this. i.e. .. do I provide Other as a selection, or do I put 3 more <input> boxes underneath the <select> boxes, or .. something else? i.e. to get fancy maybe there are ways to replace select boxes in place with input boxes, so in that case it is both implementation and design related – Dennis Nov 2 '16 at 20:52
1

Given you stated implementation is not a concern...

Javascript libraries like ui-select, typeahead.js, Select2 all have a setting allowing the user to enter an arbitrary value.

0

I ended up using the <datalist> tag. You can type anything you want into the <input> box, and then predefined suggestions show up as you type.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

It is not perfect (there are a few issues that can be worked out, like I think there is a bit of a lag in having selections pop up). But it is implemented at the browser level and works decently well.

  • For future viewers, as I currently write this comment - the support for the datalist tag is not as good as many websites say. Make sure you check your devices. – lukesrw Dec 28 '16 at 21:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.