Drop Down Menu/Text Field in one

javascript

prompt-engineering

focus-management

keyboard-navigation

byAlex Kataev·Oct 10, 2024

Marry an <input> type text and <datalist> to create a drop-down menu that accepts free text. The <datalist> handles suggestions while the <input> records typed entries or selected options from the list.

<input type="text" list="options">
<datalist id="options">
  <option value="Choice 1">
  <option value="Choice 2">
  <option value="Choice 3">
</datalist>

Users can either choose from "Choice 1", "Choice 2", "Choice 3" or bravely type their own.

Here's a way to spice things up with JavaScript to enhance interaction between the <input> element and <datalist> options. Event listeners are your loyal helpers in performing custom actions when the selection changes.

document.querySelector('input[list="options"]').addEventListener('change', (event) => {
  // I don't always handle events, but when I do, I use JavaScript ;)
});

As they say, clothes make the man. So let your dropdown and text field dress to kill with CSS. Styling braces the user interface, ensuring an impactful blend of dropdown options and text entry.

The complete story

Custom value control

Imagine being a puppet master, controlling your values programmatically. Here a hidden <input> element is your puppet. This hidden champ gets its value updated whenever the datalist changes, just like a silent guardian in the night.

document.querySelector('input[list="options"]').addEventListener('change', (event) => {
  // The bat-signal to your hidden element: "Hey, things have changed!"
  document.getElementById('selected-value').value = event.target.value;
});

jQuery Save the Day

With jQuery, you can add on an autocomplete spice mix, offering users tastier contextual feedback as they type or select options:

$('[list=options]').on('input', function() {
  var val = this.value;
  if ($('#options option').filter(function() {
      return this.value === val;
  }).length) {
    // Congrats, you have chosen... wisely.
  }
});

Editable select box on steroids

Need a nuclear solution for your users that allows flipping between a select box and an input field? Scripts like dhtmlgoodies have got you covered with a ready-made editable select box. Who needs Bruce Wayne when you can have Batman right?

The guide you deserve

Staying user focused

Ever had an annoying friend who never pays attention? Don't let your form elements be that guy. Use focus management. Shift focus to the next form input or control automatically when a user selects an option.

const inputField = document.querySelector('input[list="options"]');
const nextInput = document.getElementById('next-input');

inputField.addEventListener('change', () => {
  nextInput.focus(); // "Hey look, the bat-signal!"
});

The reset button

When you have complex logic, don't let the <select> element stay stuck in a loop if users edit their text. That's how you spell consistent user interface.

inputField.addEventListener('input', () => {
  if (inputField.value === '') {
    // If the text input was Gotham, you'd be Batman right now.
  }
});

CSS - The style-tailor

Wield CSS to tailor the appearance of your dropdown/text field combo. Surprise users with delightfully styled options that feel premium.

input[list='options'] {
  /* Turn ordinary to extraordinary */
}

input[list='options']:focus {
  /* Because even elements need a spotlight moment */
}

option {
  /* Show options some love */
}

Boosting interactivity

To increase user experience, implement keyboard navigation. Yes, your users are Hasselhoff and your options are the Berlin Wall, so let them break through with key strokes.

explain-codes / Javascript / Drop Down Menu/Text Field in one

Linked

Can an Option in a Select tag carry multiple values?



How do I fetch the value of a text input field using JavaScript?



Why does the jQuery change event not trigger when I set the value of a select using val()?



Detect all changes to an `` (immediately) using JQuery



Assign an initial value to radio button as checked

