Is there a pattern for an HTML select box that provides existing hardcoded values but also needs to be able to take custom input?

Question

I have a menu of reference information, like below.

^{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.

Answer 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.

Answer 2

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.